* { box-sizing: border-box; }
html { min-height: 100%; }
body.op-body {
margin: 0;
min-height: 100vh;
color: var(--op-text, #14213d);
background: var(--op-bg, #f6f7fb);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
.op-public-body {
background:
linear-gradient(135deg, rgba(6, 37, 91, .72), rgba(247, 44, 8, .45)),
var(--op-bg, #f6f7fb);
background-size: cover;
background-position: center;
}
.op-public-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: clamp(18px, 4vw, 48px);
}
.op-entry-card,
.op-stations-card,
.op-modal-card,
.op-station-card,
.op-card {
background: rgba(255, 255, 255, .94);
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 28px;
box-shadow: 0 24px 80px rgba(6, 37, 91, .18);
}
.op-entry-card {
width: min(680px, 100%);
padding: clamp(28px, 5vw, 56px);
display: grid;
gap: 28px;
justify-items: center;
}
.op-entry-card-narrow { width: min(460px, 100%); }
.op-entry-logo { width: min(440px, 86%); }
.op-entry-text { margin: -10px 0 0; color: var(--op-muted); text-align: center; }
.op-entry-actions { width: min(420px, 100%); display: grid; gap: 16px; }
.op-btn {
min-height: 48px;
border-radius: 16px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 18px;
font-weight: 700;
letter-spacing: .01em;
line-height: 1;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.op-btn:hover { transform: translateY(-1px); }
.op-btn-lg { min-height: 68px; border-radius: 22px; font-size: clamp(1rem, 2vw, 1.18rem); }
.op-btn-full { width: 100%; }
.op-btn-primary { background: var(--op-primary); color: #fff; box-shadow: 0 14px 30px rgba(6, 37, 91, .22); }
.op-btn-secondary { background: var(--op-secondary); color: #fff; box-shadow: 0 14px 30px rgba(255, 107, 0, .22); }
.op-btn-ghost { background: #fff; color: var(--op-primary); border-color: rgba(6, 37, 91, .16); }
.op-link-button { border: 0; background: transparent; color: var(--op-primary); padding: 8px; font-weight: 700; }
.op-modal { position: fixed; inset: 0; display: none; place-items: center; padding: 18px; z-index: 30; }
.op-modal.is-open { display: grid; }
.op-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 31, .54); backdrop-filter: blur(8px); }
.op-modal-card { position: relative; width: min(440px, 100%); padding: 30px; }
.op-modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 28px; color: var(--op-muted); }
.op-modal-card h2,
.op-entry-card h1,
.op-station-card h1 { margin: 0 0 18px; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 750; letter-spacing: -.02em; }
.op-form { display: grid; gap: 16px; }
.op-form label,
.op-settings-form label { display: grid; gap: 8px; color: var(--op-muted); font-size: .92rem; font-weight: 650; }
.op-form input,
.op-form select,
.op-settings-form input,
.op-settings-form select,
.op-form-grid input,
.op-form-grid select {
width: 100%; min-height: 46px; border: 1px solid rgba(20, 33, 61, .14); border-radius: 14px;
padding: 10px 13px; color: var(--op-text); background: #fff; outline: none;
}
.op-form input:focus,
.op-settings-form input:focus,
.op-settings-form select:focus { border-color: var(--op-primary); box-shadow: 0 0 0 4px rgba(6, 37, 91, .10); }
.op-hidden { display: none; }
.op-alert { padding: 14px 16px; border-radius: 16px; font-weight: 700; margin-bottom: 18px; }
.op-alert-ok { background: rgba(18, 128, 92, .12); color: var(--op-success); }
.op-alert-error { background: rgba(180, 35, 24, .12); color: var(--op-danger); }
.op-alert-warn { background: rgba(183, 121, 31, .12); color: var(--op-warning, #b7791f); }
.op-stations-card { width: min(960px, 100%); padding: clamp(22px, 4vw, 40px); display: grid; gap: 22px; }
.op-stations-head { display: flex; align-items: center; gap: 16px; }
.op-back-link { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(6, 37, 91, .08); font-size: 24px; }
.op-stations-logo { width: 54px; height: 54px; }
.op-stations-head h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 780; }
.op-grid { display: grid; gap: 18px; }
.op-grid-branches { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.op-branch-card,
.op-empty-card { display: grid; gap: 18px; align-content: space-between; min-height: 170px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid rgba(20, 33, 61, .08); }
.op-branch-card h2,
.op-empty-card h2 { margin: 10px 0 6px; font-size: 1.3rem; }
.op-branch-card p,
.op-empty-card p { margin: 0; color: var(--op-muted); }
.op-status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .04em; }
.op-status-ok { background: rgba(18, 128, 92, .12); color: var(--op-success); }
.op-status-muted { background: rgba(102, 112, 133, .13); color: var(--op-muted); }
.op-admin-frame { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.op-admin-sidebar { background: #fff; border-right: 1px solid rgba(20, 33, 61, .08); padding: 24px; display: grid; align-content: start; gap: 26px; }
.op-admin-brand,
.op-branch-brand { display: flex; align-items: center; gap: 12px; font-weight: 780; }
.op-admin-brand-mark { width: 42px; height: 42px; }
.op-admin-nav { display: grid; gap: 8px; }
.op-admin-nav a,
.op-branch-nav a { padding: 13px 14px; border-radius: 14px; color: var(--op-muted); font-weight: 700; }
.op-admin-nav a.active,
.op-admin-nav a:hover,
.op-branch-nav a:hover { background: rgba(6, 37, 91, .08); color: var(--op-primary); }
.op-admin-main { min-width: 0; }
.op-admin-topbar { min-height: 94px; background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(20,33,61,.08); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px clamp(22px, 4vw, 42px); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.op-admin-topbar h1 { margin: 4px 0 0; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 760; }
.op-kicker { margin: 0; color: var(--op-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.op-admin-content { padding: clamp(22px, 4vw, 42px); }
.op-card { padding: clamp(20px, 3vw, 30px); }
.op-card h2 { margin: 8px 0 8px; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 760; }
.op-card p { color: var(--op-muted); }
.op-card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.op-card-accent { border-color: rgba(255,107,0,.25); }
.op-mt { margin-top: 22px; }
.op-mt-sm { margin-top: 14px; }
.op-inline-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.op-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.op-settings-form { display: grid; gap: 20px; }
.op-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.op-form-span-2 { grid-column: span 2; }
.op-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.op-color-grid input[type=color] { padding: 4px; min-height: 48px; }
.op-asset-note { padding: 14px 16px; border-radius: 16px; background: rgba(6,37,91,.06); color: var(--op-muted); margin-bottom: 16px; line-height: 1.45; }
.op-sticky-actions { position: sticky; bottom: 0; padding: 18px 0 0; display: flex; justify-content: flex-end; }
.op-check-line { display: flex !important; align-items: center; grid-template-columns: auto 1fr !important; gap: 10px !important; }
.op-check-line input { width: auto !important; min-height: auto !important; }
.op-branch-policy-card { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(6,37,91,.045); border: 1px solid rgba(6,37,91,.10); }
.op-branch-policy-card h3 { margin: 4px 0 0; font-size: 1.04rem; font-weight: 650; color: var(--op-text); }
.op-branch-policy-card p { margin: 4px 0 0; color: var(--op-muted); font-size: .88rem; line-height: 1.42; }
.op-check-line-policy { color: var(--op-text) !important; font-weight: 560 !important; }
.op-table-wrap { overflow-x: auto; }
.op-table { width: 100%; border-collapse: collapse; }
.op-table th { text-align: left; color: var(--op-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px; }
.op-table td { padding: 12px 10px; border-top: 1px solid rgba(20, 33, 61, .08); }
.op-table-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.op-table-actions form { margin: 0; }
.op-branch-frame { min-height: 100vh; }
.op-branch-topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 42px); background: #fff; border-bottom: 1px solid rgba(20,33,61,.08); }
.op-branch-nav { display: flex; gap: 8px; }
.op-station-body { background: var(--op-primary); }
.op-station-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.op-station-card { width: min(520px, 100%); padding: clamp(28px, 5vw, 48px); display: grid; gap: 20px; text-align: center; }
.op-station-action { min-height: 96px; border-radius: 28px; border: 0; background: var(--op-secondary); color: #fff; font-size: clamp(1.35rem, 5vw, 2.4rem); font-weight: 820; letter-spacing: .02em; box-shadow: 0 20px 45px rgba(255, 107, 0, .25); }
@media (max-width: 860px) {
.op-admin-frame { grid-template-columns: 1fr; }
.op-admin-sidebar { position: static; border-right: 0; border-bottom: 1px solid rgba(20,33,61,.08); }
.op-admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-admin-topbar { position: static; }
.op-form-grid { grid-template-columns: 1fr; }
.op-form-span-2 { grid-column: span 1; }
.op-section-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
.op-entry-card { border-radius: 24px; }
.op-admin-nav { grid-template-columns: 1fr; }
.op-table-actions { justify-content: flex-start; }
}
/* PATCH 002 — access, users and operator PIN */
.op-topbar-user { margin: 6px 0 0; color: var(--op-muted); font-size: .9rem; font-weight: 650; }
.op-muted-line { color: var(--op-muted); font-size: .86rem; margin-top: 4px; }
.op-role-badge,
.op-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(6, 37, 91, .08);
color: var(--op-primary);
font-size: .78rem;
font-weight: 800;
letter-spacing: .03em;
}
.op-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.op-card-soft { box-shadow: none; background: rgba(6,37,91,.035); border-style: dashed; }
.op-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.op-check-tile {
min-height: 72px;
padding: 14px;
border: 1px solid rgba(20,33,61,.10);
border-radius: 18px;
background: #fff;
display: flex !important;
align-items: center;
gap: 12px !important;
color: var(--op-text) !important;
}
.op-check-tile input { width: 18px !important; min-height: 18px !important; }
.op-check-tile span { display: grid; gap: 3px; }
.op-check-tile small { color: var(--op-muted); font-weight: 700; }
.op-pin-once-card { border-color: rgba(255,107,0,.42); background: linear-gradient(135deg, rgba(255,107,0,.11), rgba(255,255,255,.95)); margin-bottom: 18px; }
.op-pin-once-card h2 { font-size: clamp(2.2rem, 8vw, 4rem); letter-spacing: .12em; color: var(--op-secondary); }
.op-permission-table th,
.op-permission-table td { min-width: 120px; }
.op-permission-table th:first-child,
.op-permission-table td:first-child { min-width: 280px; position: sticky; left: 0; background: #fff; z-index: 1; }
.op-btn-danger { background: var(--op-danger); color: #fff; box-shadow: 0 14px 30px rgba(180,35,24,.18); }
@media (max-width: 860px) {
.op-permission-table th:first-child,
.op-permission-table td:first-child { position: static; }
}
/* PATCH 003 - estaciones */
.op-station-code-form select,
.op-station-code-form input,
.op-pin-form input {
min-height: 52px;
border: 1px solid rgba(6, 37, 91, .16);
border-radius: 16px;
padding: 0 16px;
font: inherit;
background: #fff;
color: var(--op-text);
}
.op-code-reveal {
border: 2px solid var(--op-secondary);
box-shadow: 0 22px 70px rgba(255, 107, 0, .16);
}
.op-code-reveal h1 {
font-size: clamp(48px, 8vw, 88px);
letter-spacing: .18em;
margin: 8px 0;
color: var(--op-secondary);
}
.op-muted-line {
color: var(--op-muted);
margin: 0;
}
.op-station-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.op-branch-card-open {
gap: 18px;
}
.op-pin-form {
display: grid;
gap: 10px;
}
.op-pin-form input {
width: 100%;
text-align: center;
font-weight: 800;
letter-spacing: .28em;
}
.op-modal-card-small {
max-width: 420px;
}
.op-station-card-live {
min-width: min(92vw, 560px);
}
.op-station-live-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.op-station-meta {
display: flex;
justify-content: space-between;
gap: 16px;
margin: 18px 0;
color: var(--op-muted);
font-weight: 700;
}
.op-branch-nav a.active,
.op-admin-nav a.active {
background: rgba(255, 107, 0, .12);
color: var(--op-secondary);
}
@media (max-width: 720px) {
.op-code-reveal h1 {
font-size: 44px;
}
.op-station-live-head {
flex-direction: column;
}
}
/* PATCH 004 - catálogo operativo */
.op-flow-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 18px;
}
.op-flow-grid > div {
border: 1px solid rgba(20, 33, 61, .10);
background: rgba(255,255,255,.76);
border-radius: 18px;
padding: 16px;
display: grid;
gap: 8px;
}
.op-flow-grid strong {
color: var(--op-primary);
letter-spacing: .04em;
}
.op-flow-grid span {
color: var(--op-muted);
font-weight: 600;
line-height: 1.4;
}
.op-filter-bar {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
gap: 12px;
align-items: end;
}
.op-filter-bar input,
.op-filter-bar select,
.op-variant-grid input {
min-height: 46px;
border: 1px solid rgba(20, 33, 61, .14);
border-radius: 14px;
padding: 10px 13px;
background: #fff;
color: var(--op-text);
outline: none;
}
.op-variant-grid {
display: grid;
grid-template-columns: 1.2fr 1fr .8fr .8fr .7fr;
gap: 10px;
margin-top: 10px;
}
.op-variant-grid-head {
color: var(--op-muted);
font-size: .78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
margin-top: 0;
}
@media (max-width: 860px) {
.op-filter-bar,
.op-variant-grid {
grid-template-columns: 1fr;
}
.op-variant-grid-head {
display: none;
}
}
/* PATCH 005 — Mesas, cuentas y POS de mozo */
.op-status-warn { background: rgba(183, 121, 31, .14); color: var(--op-warning); }
.op-table-input { width: 100%; min-height: 38px; border: 1px solid rgba(20,33,61,.12); border-radius: 10px; padding: 7px 9px; }
.op-no-margin { margin: 0; }
.op-station-shell-wide { place-items: stretch; align-content: start; padding: clamp(14px, 2.5vw, 28px); background: var(--op-primary); }
.op-waiter-board,
.op-pos-screen { width: min(1440px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.op-station-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(255,255,255,.96); border-radius: 26px; padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.op-station-top h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: .95; letter-spacing: -.03em; }
.op-table-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.op-table-tile { min-height: 210px; display: grid; align-content: space-between; gap: 16px; border-radius: 28px; padding: 22px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.42); box-shadow: 0 18px 50px rgba(0,0,0,.14); }
.op-table-tile h2 { margin: 14px 0 6px; font-size: clamp(1.55rem, 4vw, 2.4rem); line-height: 1; }
.op-table-tile p { margin: 0; color: var(--op-muted); font-weight: 750; }
.op-table-action { width: 100%; min-height: 74px; font-size: 1.25rem; text-decoration: none; }
.op-table-tile.is-open { border-color: rgba(255, 107, 0, .55); }
.op-pos-layout { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; align-items: start; }
.op-ticket-panel,
.op-products-panel { background: rgba(255,255,255,.96); border-radius: 28px; padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 50px rgba(0,0,0,.14); }
.op-ticket-panel { display: grid; gap: 18px; position: sticky; top: 18px; }
.op-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-ticket-head h2 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.5rem); }
.op-current-order h3 { margin: 0 0 12px; }
.op-ticket-lines { display: grid; gap: 10px; }
.op-ticket-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; border: 1px solid rgba(20,33,61,.08); border-radius: 16px; padding: 12px; }
.op-ticket-line small { display: block; color: var(--op-muted); margin-top: 3px; font-weight: 700; }
.op-ticket-price { font-weight: 850; }
.op-mini-danger { width: 34px; height: 34px; border: 0; border-radius: 999px; color: #fff; background: var(--op-danger); font-size: 22px; line-height: 1; }
.op-ticket-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid rgba(20,33,61,.1); font-size: 1.18rem; }
.op-ticket-total strong { font-size: 1.45rem; }
.op-sent-orders { display: grid; gap: 10px; }
.op-order-chip { display: grid; gap: 3px; padding: 12px; border-radius: 16px; background: rgba(6,37,91,.06); }
.op-order-chip span { color: var(--op-muted); font-weight: 650; }
.op-products-panel { display: grid; gap: 22px; }
.op-product-group h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 3vw, 2rem); }
.op-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.op-product-tile { display: grid; gap: 14px; align-content: space-between; min-height: 190px; padding: 18px; border-radius: 24px; border: 1px solid rgba(20,33,61,.08); background: #fff; }
.op-product-tile strong { font-size: 1.1rem; }
.op-product-tile small { display: block; margin-top: 6px; color: var(--op-muted); font-weight: 750; }
.op-variant-actions { display: grid; gap: 8px; }
.op-product-button { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 16px; padding: 10px 12px; background: var(--op-secondary); color: #fff; font-weight: 850; }
.op-product-button-single { min-height: 68px; background: var(--op-primary); }
.op-product-button span { text-align: left; }
.op-empty-product-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(20,33,61,.2); border-radius: 24px; text-align: center; }
.op-empty-product-state h2 { margin: 0; }
@media (max-width: 980px) {
.op-pos-layout { grid-template-columns: 1fr; }
.op-ticket-panel { position: static; }
}
@media (max-width: 640px) {
.op-station-top { align-items: flex-start; flex-direction: column; }
.op-table-board { grid-template-columns: 1fr; }
.op-product-grid { grid-template-columns: 1fr; }
}
.op-table-config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.op-table-config-card { display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(20,33,61,.08); }
.op-table-config-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-table-config-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-table-config-card .op-inline-actions { margin-top: 0; }
@media (max-width: 640px) { .op-table-config-fields { grid-template-columns: 1fr; } }
/* PATCH 007 — Caja base, cobro y crédito simple */
.op-cash-summary-grid,
.op-cash-table-grid,
.op-cashier-grid,
.op-credit-company-list {
display: grid;
gap: 16px;
}
.op-cash-summary-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.op-cash-summary-grid article,
.op-cash-table-card,
.op-credit-company-card,
.op-cashier-card,
.op-cashier-side article {
border: 1px solid rgba(20,33,61,.08);
background: #fff;
border-radius: 22px;
padding: 18px;
}
.op-cash-summary-grid span,
.op-cashier-side span,
.op-payment-list span,
.op-credit-lines span,
.op-report-table span,
.op-cash-order-lines span,
.op-payment-mini-list span {
color: var(--op-muted);
font-weight: 650;
}
.op-cash-summary-grid strong {
display: block;
margin-top: 6px;
font-size: 1.55rem;
}
.op-cash-table-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.op-cash-table-head,
.op-cashier-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.op-cash-table-head h3,
.op-cashier-card-head h2,
.op-cashier-card-head strong {
margin: 4px 0 0;
font-size: clamp(1.7rem, 4vw, 2.45rem);
line-height: 1;
}
.op-cash-order-lines,
.op-payment-list,
.op-credit-lines,
.op-report-table,
.op-payment-mini-list {
display: grid;
gap: 10px;
}
.op-cash-order-lines > div,
.op-payment-list > article,
.op-credit-lines > article,
.op-report-table > article,
.op-payment-mini-list > div {
display: grid;
gap: 4px;
padding: 12px;
border-radius: 16px;
background: rgba(6,37,91,.05);
}
.op-report-table > article {
grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.4fr) auto auto;
align-items: center;
}
.op-payment-list > article,
.op-credit-lines > article {
grid-template-columns: 1fr auto;
align-items: center;
}
.op-payment-list > article span,
.op-credit-lines > article span {
grid-column: 1 / -1;
}
.op-form-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-payment-form {
margin-top: 14px;
}
.op-payment-locked {
display: grid;
gap: 10px;
border: 1px solid rgba(183, 121, 31, .22);
border-radius: 18px;
padding: 16px;
background: rgba(183, 121, 31, .08);
}
.op-payment-locked h3 { margin: 0; }
.op-cashier-screen {
width: min(1480px, 100%);
margin: 0 auto;
display: grid;
gap: 18px;
}
.op-cashier-layout {
display: grid;
grid-template-columns: 1fr minmax(280px, 360px);
gap: 18px;
align-items: start;
}
.op-cashier-pending,
.op-cashier-side {
display: grid;
gap: 16px;
}
.op-section-head-light {
background: rgba(255,255,255,.96);
border-radius: 24px;
padding: 18px 20px;
}
.op-cashier-alert {
background: #fff;
}
@media (max-width: 980px) {
.op-cashier-layout,
.op-report-table > article {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.op-form-grid-compact,
.op-payment-list > article,
.op-credit-lines > article {
grid-template-columns: 1fr;
}
}
/* PATCH 008 — Cierre de caja, gastos internos y resumen simple */
.op-cash-admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
align-items: start;
}
.op-cash-close-note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border: 1px solid rgba(20,33,61,.08);
border-radius: 18px;
padding: 14px 16px;
background: rgba(6,37,91,.05);
}
.op-cash-close-note span {
color: var(--op-muted);
font-weight: 700;
}
.op-cash-close-note strong {
font-size: 1.35rem;
}
.op-movement-list,
.op-close-approval-list {
display: grid;
gap: 12px;
}
.op-movement-list > article,
.op-close-approval-list > article {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 18px;
background: rgba(6,37,91,.05);
border: 1px solid rgba(20,33,61,.06);
}
.op-movement-list > article.is-negative {
background: rgba(180,35,24,.06);
}
.op-movement-list span,
.op-close-approval-list span {
display: block;
margin-top: 3px;
color: var(--op-muted);
font-weight: 650;
}
.op-movement-list b,
.op-close-approval-list b {
white-space: nowrap;
font-size: 1.1rem;
}
.op-inline-form {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.op-inline-form input {
min-width: min(360px, 48vw);
min-height: 42px;
border: 1px solid rgba(20,33,61,.12);
border-radius: 12px;
padding: 8px 10px;
}
.op-btn-danger {
background: var(--op-danger);
color: #fff;
}
@media (max-width: 760px) {
.op-movement-list > article,
.op-close-approval-list > article,
.op-inline-form {
grid-template-columns: 1fr;
flex-direction: column;
align-items: stretch;
}
.op-inline-form input {
min-width: 0;
width: 100%;
}
}
/* PATCH 009 — Inventario simple por unidad */
.op-inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
align-items: start;
}
.op-inventory-card {
display: grid;
gap: 14px;
border: 1px solid rgba(20,33,61,.08);
border-radius: 24px;
padding: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 44px rgba(20,33,61,.06);
}
.op-inventory-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.op-inventory-head h3 {
margin: 3px 0 0;
font-size: 1.08rem;
}
.op-inventory-qty {
display: grid;
gap: 3px;
padding: 14px;
border-radius: 18px;
background: rgba(6,37,91,.05);
}
.op-inventory-qty strong {
font-size: clamp(1.8rem, 5vw, 2.65rem);
line-height: 1;
}
.op-inventory-qty span {
color: var(--op-muted);
font-weight: 700;
}
.op-status-danger {
background: rgba(180,35,24,.1);
color: var(--op-danger);
}
.op-stock-form {
padding-top: 4px;
}
.op-stock-movement-list {
display: grid;
gap: 12px;
}
.op-stock-movement-list > article {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 18px;
background: rgba(6,37,91,.05);
border: 1px solid rgba(20,33,61,.06);
}
.op-stock-movement-list > article.is-negative {
background: rgba(180,35,24,.06);
}
.op-stock-movement-list span {
display: block;
margin-top: 3px;
color: var(--op-muted);
font-weight: 650;
}
.op-stock-movement-list b {
white-space: nowrap;
font-size: 1.1rem;
}
.op-pagination nav {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 760px) {
.op-stock-movement-list > article {
grid-template-columns: 1fr;
}
}
/* PATCH 010 - cuenta viva, abonos y cierre operativo */
.op-account-mini-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 12px 0;
}
.op-account-mini-grid article {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 16px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.72);
}
.op-account-mini-grid span {
display: block;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.62;
}
.op-account-mini-grid strong {
display: block;
margin-top: 3px;
font-size: 1rem;
font-weight: 680;
}
.op-close-blockers {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.op-cashier-card .op-account-mini-grid,
.op-cash-table-card .op-account-mini-grid {
margin-top: 10px;
margin-bottom: 10px;
}
/* PATCH 011 - clientes, zonas y pedidos por canal */
.op-channel-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.op-channel-actions .op-btn {
min-width: 170px;
justify-content: center;
}
.op-channel-order-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.op-channel-order-card,
.op-channel-new-card,
.op-channel-client-box {
border: 1px solid rgba(20,33,61,.08);
border-radius: 24px;
padding: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 44px rgba(20,33,61,.06);
}
.op-channel-new-card {
max-width: 860px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.op-channel-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.op-channel-switch a {
min-height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(6,37,91,.07);
color: var(--op-text);
text-decoration: none;
font-weight: 760;
}
.op-channel-switch a.active {
background: var(--op-primary);
color: #fff;
}
.op-channel-client-box {
display: grid;
gap: 4px;
margin: 12px 0;
box-shadow: none;
background: rgba(6,37,91,.05);
}
.op-channel-client-box strong,
.op-channel-client-box span,
.op-channel-client-box small {
display: block;
}
.op-channel-client-box span,
.op-channel-client-box small {
color: var(--op-muted);
font-weight: 650;
}
.op-delivery-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 18px;
align-items: start;
}
.op-delivery-main,
.op-delivery-side {
display: grid;
gap: 18px;
}
.op-zone-list,
.op-channel-admin-list,
.op-customer-mini-list {
display: grid;
gap: 12px;
margin-top: 14px;
}
.op-zone-list > article,
.op-channel-admin-list > article,
.op-customer-mini-list > div {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 18px;
background: rgba(6,37,91,.05);
border: 1px solid rgba(20,33,61,.06);
}
.op-zone-list strong,
.op-channel-admin-list strong,
.op-customer-mini-list strong {
display: block;
}
.op-zone-list span,
.op-zone-list small,
.op-channel-admin-list span,
.op-channel-admin-list small,
.op-customer-mini-list span {
display: block;
margin-top: 3px;
color: var(--op-muted);
font-weight: 650;
}
.op-zone-form {
padding: 14px;
border-radius: 20px;
background: rgba(6,37,91,.04);
margin-bottom: 14px;
}
.op-kds-extra-meta {
display: grid;
gap: 2px;
margin: -4px 0 10px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(255,255,255,.72);
color: var(--op-text);
}
.op-kds-extra-meta span,
.op-kds-extra-meta small {
display: block;
font-weight: 760;
}
.op-kds-extra-meta small {
color: var(--op-muted);
font-weight: 650;
}
@media (max-width: 920px) {
.op-delivery-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.op-channel-switch,
.op-zone-list > article,
.op-channel-admin-list > article,
.op-customer-mini-list > div {
grid-template-columns: 1fr;
}
.op-channel-actions .op-btn {
width: 100%;
}
}
.op-mt-lg { margin-top: 26px; }
.op-admin-card {
border: 1px solid rgba(20,33,61,.08);
border-radius: 24px;
padding: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 44px rgba(20,33,61,.06);
}
/* PATCH 012 - delivery dispatch y rendición */
.op-delivery-layout-wide {
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 390px);
}
.op-delivery-assign-form,
.op-delivery-settlement-form {
padding: 14px;
border-radius: 20px;
background: rgba(6,37,91,.04);
}
.op-delivery-ready-list,
.op-delivery-run-list,
.op-delivery-run-orders,
.op-delivery-station-grid,
.op-delivery-station-orders {
display: grid;
gap: 12px;
}
.op-delivery-ready-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(20,33,61,.08);
cursor: pointer;
}
.op-delivery-ready-card input {
width: 22px;
height: 22px;
}
.op-delivery-ready-card span,
.op-delivery-ready-card small,
.op-delivery-ready-card strong,
.op-delivery-ready-card b {
display: block;
}
.op-delivery-ready-card small,
.op-delivery-run-head span,
.op-delivery-run-orders span,
.op-delivery-run-orders small,
.op-delivery-order-head span,
.op-delivery-address-box span,
.op-delivery-address-box small {
color: var(--op-muted);
font-weight: 650;
}
.op-delivery-run-card,
.op-delivery-station-run,
.op-delivery-station-order {
border: 1px solid rgba(20,33,61,.08);
border-radius: 22px;
padding: 16px;
background: rgba(255,255,255,.96);
box-shadow: 0 18px 44px rgba(20,33,61,.06);
}
.op-delivery-run-head,
.op-delivery-order-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.op-delivery-run-orders > div {
padding: 12px;
border-radius: 16px;
background: rgba(6,37,91,.05);
border: 1px solid rgba(20,33,61,.05);
}
.op-delivery-run-orders strong,
.op-delivery-run-orders span,
.op-delivery-run-orders small {
display: block;
}
.op-delivery-settle-notice {
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 12px;
background: rgba(245,158,11,.12);
color: #7c2d12;
font-weight: 760;
}
.op-delivery-station {
min-height: 100dvh;
}
.op-delivery-station-grid {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.op-delivery-address-box {
display: grid;
gap: 4px;
padding: 12px;
border-radius: 16px;
background: rgba(6,37,91,.05);
}
.op-delivery-action-form {
margin-top: 10px;
padding: 12px;
border-radius: 16px;
background: rgba(6,37,91,.035);
}
.op-delivery-recent {
margin-top: 24px;
}
.op-delivery-recent-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.op-delivery-recent-list span {
padding: 8px 10px;
border-radius: 999px;
background: rgba(6,37,91,.06);
color: var(--op-muted);
font-weight: 700;
}
@media (max-width: 920px) {
.op-delivery-layout-wide,
.op-delivery-station-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.op-delivery-ready-card,
.op-delivery-run-head,
.op-delivery-order-head {
grid-template-columns: 1fr;
display: grid;
}
}
/* PATCH 013 - Thermal print quick links */
.op-mini-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 28px;
margin-top: 6px;
padding: 5px 10px;
border: 1px solid rgba(20, 33, 61, .18);
border-radius: 999px;
color: var(--op-primary);
background: rgba(255, 255, 255, .78);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
}
.op-kds-print {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
margin-top: 6px;
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 999px;
color: #fff;
background: rgba(0, 0, 0, .22);
font-size: 10px;
font-weight: 800;
text-decoration: none;
}
/* PATCH 014 — Delivery queue */
.op-delivery-queue-panel {
background: rgba(255,255,255,.92);
border: 1px solid rgba(15,23,42,.08);
border-radius: 24px;
padding: 20px;
box-shadow: 0 18px 40px rgba(15,23,42,.08);
margin-bottom: 22px;
}
.op-delivery-queue-form {
display: grid;
gap: 16px;
}
.op-delivery-queue-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.op-delivery-queue-card {
min-height: 92px;
border: 1px solid rgba(15,23,42,.1);
border-radius: 18px;
padding: 16px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
background: #fff;
cursor: pointer;
}
.op-delivery-queue-card input {
width: 24px;
height: 24px;
accent-color: var(--op-primary, #d71920);
}
.op-delivery-queue-card strong,
.op-delivery-queue-card span,
.op-delivery-queue-card small {
display: block;
}
.op-delivery-queue-card strong {
font-size: 1.02rem;
color: #111827;
}
.op-delivery-queue-card span {
color: #374151;
margin-top: 3px;
}
.op-delivery-queue-card small {
color: #6b7280;
margin-top: 4px;
line-height: 1.3;
}
.op-delivery-queue-card em {
font-style: normal;
font-weight: 700;
color: #111827;
white-space: nowrap;
}
.op-compact-empty {
min-height: 84px;
padding: 20px;
}
@media (max-width: 720px) {
.op-delivery-queue-panel {
padding: 16px;
border-radius: 20px;
}
.op-delivery-queue-list {
grid-template-columns: 1fr;
}
}
/* PATCH 015 · Promociones */
.op-ticket-discount {
color: var(--op-success, #12805c);
}
.op-ticket-discount strong {
color: var(--op-success, #12805c);
}
.op-promotion-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 8px 12px;
background: rgba(18,128,92,.1);
color: var(--op-success, #12805c);
font-size: .82rem;
font-weight: 700;
}
/* PATCH 015A — Promociones avanzadas */
.op-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.op-info-tile { padding: 14px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 16px; background: rgba(255,255,255,.68); }
.op-info-tile strong { display: block; font-size: .92rem; margin-bottom: 4px; }
.op-info-tile small { color: var(--op-muted); line-height: 1.45; }
.op-card-flat { box-shadow: none; background: rgba(255,255,255,.52); border: 1px solid rgba(15, 23, 42, .08); }
.op-form-grid select[multiple] { min-height: 160px; padding: 8px; }
.op-mb-sm { margin-bottom: 14px; }
.op-alert-danger { background: rgba(180, 35, 24, .12); color: var(--op-danger); }
@media (max-width: 860px) { .op-grid-3 { grid-template-columns: 1fr; } }
/* PATCH 016 — Sabores, porciones y selector táctil de pizzas */
.op-variant-grid { grid-template-columns: 1.15fr 1fr .75fr .75fr .65fr .65fr; }
.op-mini-check { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(20,33,61,.12); border-radius: 14px; background: #fff; font-weight: 800; }
.op-mini-check input { width: auto; min-height: auto; }
.op-inline-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.op-product-tile-flavors { min-height: 260px; grid-column: span 2; }
.op-flavor-variant-stack { display: grid; gap: 12px; }
.op-flavor-form { display: grid; gap: 10px; padding: 10px; border: 1px solid rgba(20,33,61,.08); border-radius: 18px; background: rgba(6,37,91,.035); }
.op-flavor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-flavor-head strong { font-size: 1rem; }
.op-flavor-head b { white-space: nowrap; color: var(--op-primary); }
.op-flavor-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.op-flavor-pill { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(20,33,61,.12); border-radius: 14px; background: #fff; font-weight: 800; cursor: pointer; }
.op-flavor-pill input { width: 18px; height: 18px; accent-color: var(--op-secondary); }
.op-flavor-pill.disabled { opacity: .45; cursor: not-allowed; }
.op-flavor-empty { padding: 12px; border-radius: 14px; background: rgba(183,121,31,.12); color: var(--op-warning); font-weight: 850; text-align: center; }
.op-flavor-line { color: var(--op-primary); font-weight: 850; }
@media (max-width: 980px) { .op-product-tile-flavors { grid-column: span 1; } }
/* PATCH 017 · excepciones operativas */
.op-order-chip-wide {
display: block;
}
.op-exception-panel {
margin-top: .75rem;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 18px;
background: rgba(255, 255, 255, .72);
padding: .75rem;
}
.op-exception-panel summary {
cursor: pointer;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--op-danger);
font-weight: 700;
}
.op-exception-lines {
display: grid;
gap: .75rem;
margin-top: .75rem;
}
.op-exception-form {
display: grid;
gap: .6rem;
padding: .75rem;
border-radius: 16px;
background: rgba(248, 250, 252, .92);
border: 1px solid rgba(15, 23, 42, .08);
margin-top: .75rem;
}
.op-exception-auth {
display: grid;
gap: .55rem;
}
.op-exception-auth select,
.op-exception-auth input,
.op-inline-edit-form input,
.op-inline-edit-form select {
width: 100%;
}
.op-inline-edit-form {
display: grid;
gap: .5rem;
}
.op-check-row-mini {
font-size: .82rem;
}
.op-btn-danger {
background: var(--op-danger);
border-color: var(--op-danger);
color: #fff;
}
/* PATCH 020 - pantalla inicial pública / login */
.op-public-body {
min-height: 100dvh;
overflow-x: hidden;
}
.op-public-shell {
min-height: 100dvh;
padding: clamp(14px, 3.5vh, 42px) clamp(16px, 4vw, 48px) max(48px, calc(34px + env(safe-area-inset-bottom, 0px)));
}
.op-entry-card {
max-height: calc(100dvh - 72px);
overflow: visible;
gap: clamp(16px, 2.8vh, 24px);
padding: clamp(24px, 4.2vh, 48px) clamp(24px, 5vw, 56px);
}
.op-entry-logo {
width: min(380px, 82%);
max-height: clamp(82px, 17vh, 150px);
object-fit: contain;
}
.op-entry-actions {
gap: 16px;
}
.op-entry-product-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: min(210px, 58%);
margin-top: 2px;
opacity: 1;
}
.op-entry-product-brand::before {
content: 'FUNCIONA CON';
color: var(--op-muted, #667085);
font-size: .68rem;
font-weight: 650;
letter-spacing: .16em;
line-height: 1;
}
.op-entry-product-logo {
width: 100%;
max-height: 46px;
object-fit: contain;
filter: none;
}
.op-public-footer {
position: fixed;
z-index: 20;
left: 0;
right: 0;
bottom: 0;
min-height: 30px;
padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .78);
border-top: 1px solid rgba(20, 33, 61, .08);
color: var(--op-muted, #667085);
font-size: .78rem;
font-weight: 600;
letter-spacing: .01em;
backdrop-filter: blur(12px);
}
.op-public-footer a {
color: var(--op-primary, #06255b);
font-weight: 800;
text-decoration: none;
}
.op-public-footer a:hover {
text-decoration: underline;
}
@media (max-height: 700px) and (min-width: 641px) {
.op-entry-card {
gap: 14px;
padding-top: 24px;
padding-bottom: 24px;
}
.op-entry-logo {
max-height: 106px;
}
.op-entry-product-logo {
max-height: 36px;
}
}
@media (max-width: 560px) {
.op-public-shell {
padding: 14px 14px max(48px, calc(34px + env(safe-area-inset-bottom, 0px)));
}
.op-entry-card {
width: min(100%, 430px);
max-height: calc(100dvh - 62px);
gap: 14px;
padding: 22px 18px;
}
.op-entry-logo {
width: min(300px, 84%);
max-height: 110px;
}
.op-entry-actions {
gap: 14px;
}
.op-entry-product-brand {
width: min(160px, 52%);
}
.op-entry-product-logo {
max-height: 34px;
}
.op-public-footer {
min-height: 28px;
font-size: .72rem;
}
}
/* PATCH 020A - refuerzo modal ingreso administrativo */
.op-modal {
overflow: hidden;
}
.op-auth-modal-card {
width: min(440px, calc(100vw - 28px));
max-height: calc(100dvh - 40px);
padding: clamp(22px, 4vh, 30px);
overflow: visible;
}
.op-auth-header {
display: grid;
justify-items: center;
gap: 12px;
margin: 0 0 18px;
text-align: center;
}
.op-auth-logo {
width: min(230px, 68%);
max-height: 72px;
object-fit: contain;
}
.op-auth-title,
.op-modal-card .op-auth-title,
.op-entry-card .op-auth-title {
margin: 0;
text-align: center;
font-size: clamp(1.28rem, 2.25vw, 1.72rem);
line-height: 1.12;
font-weight: 780;
letter-spacing: -.025em;
white-space: nowrap;
}
.op-auth-form {
gap: 14px;
}
.op-auth-form label,
.op-field {
gap: 7px;
}
.op-input-wrap {
position: relative;
display: block;
}
.op-input-wrap input {
padding-left: 46px;
}
.op-input-wrap-password input {
padding-right: 48px;
}
.op-input-icon,
.op-password-toggle {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--op-muted, #667085);
}
.op-input-icon {
left: 14px;
width: 20px;
height: 20px;
pointer-events: none;
opacity: .9;
}
.op-input-icon svg,
.op-password-toggle svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.op-password-toggle {
right: 8px;
width: 36px;
height: 36px;
border: 0;
border-radius: 12px;
background: transparent;
cursor: pointer;
}
.op-password-toggle:hover,
.op-password-toggle:focus-visible {
background: rgba(6, 37, 91, .08);
color: var(--op-primary, #06255b);
outline: none;
}
.op-password-toggle .op-eye-off {
display: none;
}
.op-password-toggle[aria-pressed="true"] .op-eye-on {
display: none;
}
.op-password-toggle[aria-pressed="true"] .op-eye-off {
display: block;
}
.op-auth-hint {
margin: -2px 0 0;
color: var(--op-muted, #667085);
font-size: .82rem;
line-height: 1.35;
text-align: center;
}
.op-reset-card {
width: min(470px, calc(100vw - 28px));
gap: 18px;
}
@media (max-width: 520px) {
.op-auth-modal-card {
padding: 22px 18px;
border-radius: 24px;
}
.op-auth-logo {
width: min(190px, 70%);
max-height: 58px;
}
.op-auth-title,
.op-modal-card .op-auth-title,
.op-entry-card .op-auth-title {
font-size: clamp(1.05rem, 6vw, 1.32rem);
}
}
@media (max-width: 380px) {
.op-auth-title,
.op-modal-card .op-auth-title,
.op-entry-card .op-auth-title {
white-space: normal;
}
}
@media (max-height: 640px) {
.op-auth-modal-card {
max-height: calc(100dvh - 22px);
padding-top: 18px;
padding-bottom: 18px;
}
.op-auth-header {
gap: 8px;
margin-bottom: 12px;
}
.op-auth-logo {
max-height: 48px;
}
.op-auth-form {
gap: 10px;
}
.op-auth-form .op-btn {
min-height: 44px;
}
}
/* PATCH 020B - estaciones públicas táctiles */
.op-public-stations-card {
width: min(880px, calc(100vw - 32px));
max-height: calc(100dvh - 72px);
padding: clamp(20px, 3.2vh, 34px);
gap: clamp(14px, 2vh, 20px);
overflow: visible;
}
.op-public-stations-head {
justify-content: flex-start;
}
.op-public-stations-head h1 {
line-height: 1;
}
.op-public-station-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
gap: 14px;
}
.op-public-branch-tile {
min-height: 86px;
border: 1px solid rgba(20, 33, 61, .10);
border-radius: 22px;
background: #fff;
color: var(--op-text, #14213d);
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
gap: 12px;
padding: 16px 18px;
text-align: left;
box-shadow: 0 16px 38px rgba(6, 37, 91, .07);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.op-public-branch-tile.is-open:hover,
.op-public-branch-tile.is-open:focus-visible {
transform: translateY(-1px);
border-color: rgba(18, 128, 92, .35);
box-shadow: 0 18px 46px rgba(18, 128, 92, .14);
outline: none;
}
.op-public-branch-tile.is-closed {
cursor: not-allowed;
opacity: .86;
background: rgba(255,255,255,.72);
}
.op-branch-state-dot {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 6px rgba(102,112,133,.10);
}
.op-branch-state-dot.is-open {
background: var(--op-success, #12805c);
box-shadow: 0 0 0 6px rgba(18, 128, 92, .12), 0 0 24px rgba(18, 128, 92, .35);
}
.op-branch-state-dot.is-closed {
background: var(--op-danger, #b42318);
box-shadow: 0 0 0 6px rgba(180, 35, 24, .10);
}
.op-public-branch-name {
font-weight: 820;
font-size: clamp(.98rem, 1.9vw, 1.22rem);
letter-spacing: -.01em;
line-height: 1.1;
}
.op-public-empty-card {
min-height: 86px;
align-content: center;
text-align: center;
}
.op-station-code-modal,
.op-station-pin-modal {
width: min(430px, calc(100vw - 28px));
max-height: calc(100dvh - 38px);
padding: clamp(20px, 3.2vh, 28px);
overflow: visible;
}
.op-station-modal-head,
.op-station-pin-head {
display: grid;
justify-items: center;
gap: 12px;
text-align: center;
margin-bottom: 16px;
}
.op-station-modal-head h2,
.op-station-pin-head h2 {
margin: 0;
text-align: center;
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
font-weight: 820;
letter-spacing: -.02em;
line-height: 1.1;
}
.op-station-service-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: nowrap;
}
.op-service-icon {
width: 46px;
height: 46px;
border-radius: 15px;
border: 1px solid rgba(20, 33, 61, .13);
background: #fff;
color: #111827;
display: inline-grid;
place-items: center;
box-shadow: 0 10px 24px rgba(6, 37, 91, .08);
}
.op-service-icon svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
}
.op-station-svg-cashier circle {
stroke-width: 2.05;
}
.op-station-svg-cashier path {
stroke-width: 2.05;
}
.op-service-icon.is-closed {
filter: grayscale(1);
opacity: .54;
background: #fbfcfe;
color: #313744;
box-shadow: none;
}
.op-service-icon.is-open {
border-color: currentColor;
opacity: 1;
}
.op-service-icon.is-open.op-station-type-waiter { color: #067a69; background: rgba(6, 122, 105, .10); }
.op-service-icon.is-open.op-station-type-kitchen { color: #d65f00; background: rgba(214, 95, 0, .11); }
.op-service-icon.is-open.op-station-type-cashier { color: #0657b8; background: rgba(6, 87, 184, .10); }
.op-service-icon.is-open.op-station-type-delivery { color: #8b2bb1; background: rgba(139, 43, 177, .09); }
.op-touch-code-form {
gap: 12px;
}
.op-touch-code-field {
display: grid;
gap: 8px;
text-align: center;
color: var(--op-muted, #667085);
font-size: .78rem;
font-weight: 850;
letter-spacing: .08em;
}
.op-touch-code-field input {
text-align: center;
min-height: 56px;
border: 1px solid rgba(6, 37, 91, .18);
border-radius: 18px;
padding: 8px 16px;
background: #fff;
color: var(--op-primary, #06255b);
font-size: clamp(1.6rem, 6vw, 2.25rem);
font-weight: 850;
letter-spacing: .18em;
outline: none;
caret-color: transparent;
}
.op-touch-code-field input:focus {
border-color: var(--op-primary, #06255b);
box-shadow: 0 0 0 4px rgba(6, 37, 91, .10);
}
.op-numpad {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.op-numpad button {
min-height: 54px;
border: 1px solid rgba(20, 33, 61, .10);
border-radius: 16px;
background: #fff;
color: var(--op-text, #14213d);
font-size: 1.35rem;
font-weight: 820;
box-shadow: 0 10px 22px rgba(6, 37, 91, .06);
}
.op-numpad button:hover,
.op-numpad button:focus-visible {
border-color: rgba(6, 37, 91, .26);
background: rgba(6, 37, 91, .05);
outline: none;
}
@media (max-height: 720px) and (min-width: 641px) {
.op-public-stations-card {
max-height: calc(100dvh - 58px);
padding-top: 20px;
padding-bottom: 20px;
}
.op-public-branch-tile {
min-height: 74px;
padding-top: 13px;
padding-bottom: 13px;
}
.op-numpad button {
min-height: 48px;
}
.op-touch-code-field input {
min-height: 50px;
font-size: 1.6rem;
}
}
@media (max-width: 560px) {
.op-public-stations-card {
width: min(100%, 430px);
max-height: calc(100dvh - 64px);
padding: 20px 16px;
border-radius: 24px;
}
.op-public-stations-head {
gap: 10px;
}
.op-stations-logo {
width: 42px;
height: 42px;
}
.op-public-station-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.op-public-branch-tile {
min-height: 70px;
grid-template-columns: 16px 1fr;
padding: 12px;
border-radius: 18px;
}
.op-branch-state-dot {
width: 12px;
height: 12px;
}
.op-public-branch-name {
font-size: .86rem;
}
.op-station-service-icons {
gap: 7px;
}
.op-service-icon {
width: 38px;
height: 38px;
border-radius: 13px;
}
.op-service-icon svg {
width: 23px;
height: 23px;
}
.op-numpad button {
min-height: 48px;
font-size: 1.18rem;
}
}
/* PATCH 021 — Mesas: cambio, unión y panel táctil limpio */
.op-station-shell-wide.op-waiter-shell-clean {
background: #fff;
min-height: 100vh;
color: var(--op-text);
}
.op-waiter-board-clean {
width: min(1380px, 100%);
gap: 18px;
}
.op-station-top-clean {
background: #fff;
box-shadow: none;
border: 1px solid rgba(20,33,61,.08);
}
.op-table-board-clean {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 16px;
}
.op-table-tile-form { margin: 0; }
.op-table-tile-clean {
width: 100%;
min-height: 178px;
text-align: left;
color: var(--op-text);
text-decoration: none;
border: 1px solid rgba(20,33,61,.10);
box-shadow: 0 16px 36px rgba(20,33,61,.07);
background: #fff;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
cursor: pointer;
}
button.op-table-tile-clean {
appearance: none;
font: inherit;
}
.op-table-tile-clean:hover,
.op-table-tile-clean:focus-visible {
transform: translateY(-2px);
border-color: rgba(6,37,91,.22);
box-shadow: 0 18px 42px rgba(20,33,61,.10);
outline: none;
}
.op-table-tile-clean.is-open {
border-color: rgba(6,37,91,.18);
}
.op-table-tile-clean.has-balance {
border-color: rgba(183,121,31,.32);
}
.op-table-card-main {
display: flex;
align-items: flex-start;
gap: 14px;
}
.op-table-icon {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(6,37,91,.06);
flex: 0 0 auto;
}
.op-table-icon svg {
width: 34px;
height: 34px;
fill: var(--op-primary);
opacity: .88;
}
.op-table-tile-clean h2 {
margin: 10px 0 0;
font-size: clamp(1.18rem, 2.6vw, 1.55rem);
letter-spacing: -.02em;
line-height: 1;
}
.op-table-card-bottom {
display: grid;
gap: 10px;
}
.op-capacity-row {
display: flex;
align-items: center;
gap: 5px;
min-height: 22px;
color: var(--op-muted);
font-weight: 850;
}
.op-capacity-row small {
font-size: .72rem;
font-weight: 850;
letter-spacing: .04em;
}
.op-person-icon {
width: 15px;
height: 15px;
position: relative;
display: inline-block;
}
.op-person-icon::before,
.op-person-icon::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
background: currentColor;
}
.op-person-icon::before {
top: 0;
width: 7px;
height: 7px;
border-radius: 999px;
}
.op-person-icon::after {
bottom: 0;
width: 12px;
height: 7px;
border-radius: 999px 999px 3px 3px;
}
.op-status-blue {
background: rgba(6,37,91,.12);
color: var(--op-primary);
}
.op-table-balance {
min-height: 32px;
border-radius: 999px;
padding: 7px 11px;
background: rgba(183,121,31,.14);
color: var(--op-warning);
font-size: .82rem;
font-weight: 900;
letter-spacing: .02em;
text-align: center;
}
.op-table-balance-muted {
background: rgba(102,112,133,.10);
color: var(--op-muted);
}
.op-table-tools-panel {
border: 1px solid rgba(20,33,61,.10);
border-radius: 18px;
background: rgba(6,37,91,.035);
overflow: hidden;
}
.op-table-tools-panel summary {
list-style: none;
cursor: pointer;
padding: 14px 16px;
font-weight: 900;
letter-spacing: .04em;
color: var(--op-primary);
}
.op-table-tools-panel summary::-webkit-details-marker { display: none; }
.op-table-tools-body {
display: grid;
gap: 14px;
padding: 0 14px 14px;
}
.op-linked-table-list {
display: grid;
gap: 8px;
}
.op-linked-table-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(20,33,61,.08);
}
.op-linked-table-chip span {
font-weight: 900;
letter-spacing: .03em;
}
.op-linked-table-chip small,
.op-linked-table-chip button {
border: 0;
border-radius: 999px;
min-height: 28px;
padding: 5px 10px;
background: rgba(6,37,91,.08);
color: var(--op-primary);
font-size: .72rem;
font-weight: 900;
}
.op-linked-table-chip button {
cursor: pointer;
background: rgba(180,35,24,.10);
color: var(--op-danger);
}
.op-form-compact {
gap: 9px;
background: #fff;
border: 1px solid rgba(20,33,61,.08);
border-radius: 16px;
padding: 12px;
}
.op-form-compact strong {
font-size: .8rem;
letter-spacing: .05em;
color: var(--op-muted);
}
.op-form-compact select,
.op-form-compact input {
min-height: 42px;
border-radius: 12px;
}
@media (max-width: 720px) {
.op-table-board-clean {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.op-table-tile-clean {
min-height: 162px;
border-radius: 22px;
padding: 16px;
}
.op-table-icon {
width: 42px;
height: 42px;
}
.op-table-icon svg {
width: 30px;
height: 30px;
}
}
/* PATCH 021B — Ajustes visuales de mesas y liberación sin consumo */
.op-table-tile-clean.is-free {
background: linear-gradient(180deg, #f1fbf4 0%, #ffffff 100%);
border-color: rgba(26, 127, 55, .22);
}
.op-table-tile-clean.is-open {
background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
border-color: rgba(6, 85, 170, .24);
}
.op-table-tile-clean.has-balance {
border-color: rgba(183, 121, 31, .36);
box-shadow: 0 16px 38px rgba(183, 121, 31, .10);
}
.op-table-tile-clean.is-free .op-table-icon {
background: rgba(26, 127, 55, .10);
color: #1a7f37;
}
.op-table-tile-clean.is-open .op-table-icon {
background: rgba(6, 85, 170, .10);
color: #0655aa;
}
.op-table-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 3.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .95;
}
.op-table-tile-clean .op-status {
white-space: nowrap;
display: inline-flex;
align-items: center;
min-height: 26px;
line-height: 1;
}
.op-table-tile-clean .op-status-blue {
background: rgba(6, 85, 170, .13);
color: #0655aa;
}
.op-table-tile-clean .op-status-ok {
background: rgba(26, 127, 55, .13);
color: #1a7f37;
}
.op-table-balance-empty {
background: rgba(26, 127, 55, .08);
color: #1a7f37;
}
.op-empty-release-form {
display: grid;
gap: 7px;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(180,35,24,.12);
background: rgba(180,35,24,.04);
}
.op-empty-release-form small {
text-align: center;
color: var(--op-muted);
font-size: .76rem;
font-weight: 750;
}
@media (max-width: 720px) {
.op-table-tile-clean .op-status {
font-size: .70rem;
letter-spacing: .035em;
padding-left: 8px;
padding-right: 8px;
}
}
/* PATCH 021C — Firma de mozo por PIN */
.op-send-pin-card {
max-width: 390px;
text-align: center;
}
.op-pin-confirm-form {
display: grid;
gap: 14px;
}
.op-pin-input {
width: min(210px, 100%);
margin: 0 auto;
height: 58px;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, .16);
background: rgba(255, 255, 255, .92);
text-align: center;
font-size: 2rem;
letter-spacing: .32em;
font-weight: 800;
color: var(--op-text);
outline: none;
}
.op-pin-input:focus {
border-color: var(--op-primary);
box-shadow: 0 0 0 4px rgba(255, 107, 0, .12);
}
.op-numpad-compact {
width: min(250px, 100%);
margin: 0 auto;
}
.op-error-line {
border-radius: 14px;
padding: 10px 12px;
background: rgba(239, 68, 68, .10);
border: 1px solid rgba(239, 68, 68, .22);
color: #991b1b;
font-size: .82rem;
font-weight: 800;
text-align: center;
}
/* PATCH 022A - Mesa / comanda tactile UI refresh */
.op-station-shell-comanda {
background: #f4f7fb;
}
.op-comanda-screen {
width: min(1520px, calc(100vw - 28px));
margin: 0 auto;
display: grid;
gap: 16px;
}
.op-comanda-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 116px;
padding: 22px 28px;
border-radius: 28px 28px 6px 6px;
color: #fff;
background:
linear-gradient(135deg, rgba(7, 33, 73, .98), rgba(8, 57, 96, .94)),
var(--op-primary);
box-shadow: 0 20px 60px rgba(2, 20, 50, .22);
}
.op-comanda-hero-main {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.op-comanda-menu {
width: 68px;
height: 68px;
flex: 0 0 68px;
display: grid;
place-items: center;
border-radius: 18px;
color: #fff;
text-decoration: none;
font-size: 2.15rem;
font-weight: 950;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.op-comanda-back {
font-size: 2.55rem;
line-height: 1;
padding-bottom: 4px;
}
.op-comanda-title-block {
min-width: 0;
}
.op-comanda-hero-kicker {
display: block;
margin: 0 0 3px;
color: rgba(255,255,255,.74);
font-size: .82rem;
font-weight: 900;
letter-spacing: .14em;
}
.op-comanda-hero h1 {
margin: 0;
font-size: clamp(2.85rem, 5.4vw, 5.15rem);
line-height: .88;
letter-spacing: -.065em;
font-weight: 950;
}
.op-comanda-hero p {
margin: 8px 0 0;
color: rgba(255,255,255,.82);
font-size: clamp(1rem, 1.8vw, 1.35rem);
font-weight: 750;
}
.op-comanda-hero-status {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 14px;
min-width: min(320px, 42vw);
padding: 14px 18px;
border-radius: 18px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.op-comanda-check {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
background: #16a34a;
border: 2px solid rgba(255,255,255,.65);
font-weight: 950;
font-size: 1.35rem;
}
.op-comanda-check-warn { background: #f59e0b; font-size: 1rem; }
.op-comanda-check-muted { background: rgba(255,255,255,.24); }
.op-comanda-hero-status strong,
.op-comanda-hero-status small {
display: block;
}
.op-comanda-hero-status strong {
color: #fff;
font-size: 1.08rem;
line-height: 1.1;
}
.op-comanda-hero-status small {
margin-top: 3px;
color: rgba(255,255,255,.74);
font-weight: 650;
}
.op-comanda-info-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding: 12px 16px;
border-radius: 0 0 22px 22px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 16px 45px rgba(15, 23, 42, .08);
}
.op-comanda-info-strip article {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 8px 14px;
border-right: 1px solid rgba(20,33,61,.08);
}
.op-comanda-info-strip article:last-child { border-right: 0; }
.op-info-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 42px;
border-radius: 14px;
background: #eef4ff;
color: var(--op-primary);
font-size: 1.2rem;
}
.op-comanda-info-strip small {
display: block;
color: var(--op-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-size: .72rem;
font-weight: 850;
}
.op-comanda-info-strip strong {
display: block;
min-width: 0;
margin-top: 2px;
color: var(--op-ink);
font-weight: 850;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.op-comanda-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(330px, 470px);
gap: 18px;
align-items: start;
}
.op-comanda-catalog,
.op-comanda-summary {
background: rgba(255,255,255,.98);
border: 1px solid rgba(20,33,61,.08);
border-radius: 26px;
box-shadow: 0 16px 50px rgba(15, 23, 42, .09);
}
.op-comanda-catalog {
overflow: hidden;
}
.op-comanda-tabs {
position: sticky;
top: 0;
z-index: 4;
display: flex;
gap: 10px;
padding: 14px 16px 0;
overflow-x: auto;
background: rgba(255,255,255,.96);
scrollbar-width: none;
}
.op-comanda-tabs::-webkit-scrollbar { display: none; }
.op-comanda-tabs-shell {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 14px 16px 0;
background: rgba(255,255,255,.96);
}
.op-comanda-tabs-shell .op-comanda-tabs {
position: static;
top: auto;
z-index: auto;
flex: 1 1 auto;
min-width: 0;
padding: 0;
background: transparent;
}
.op-comanda-tab-scroll {
width: 46px;
min-width: 46px;
min-height: 58px;
display: inline-grid;
place-items: center;
border-radius: 18px 18px 8px 8px;
border: 1px solid rgba(20,33,61,.10);
background: #fff;
color: var(--op-primary);
font-size: 2rem;
line-height: 1;
font-weight: 900;
box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
cursor: pointer;
transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.op-comanda-tab-scroll:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(15, 23, 42, .12);
}
.op-comanda-tab-scroll:disabled {
opacity: .38;
cursor: default;
box-shadow: none;
}
.op-comanda-tab-scroll.is-hidden {
display: none;
}
.op-comanda-tabs button {
min-height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 20px;
border-radius: 18px 18px 8px 8px;
color: rgba(20, 33, 61, .74);
text-decoration: none;
background: #f1f5f9;
border: 1px solid rgba(20,33,61,.08);
font-weight: 900;
white-space: nowrap;
box-shadow: none;
}
.op-comanda-tabs button.is-active {
color: #fff;
background: var(--op-primary);
border-color: transparent;
box-shadow: 0 10px 26px rgba(2, 20, 50, .14);
}
.op-comanda-tabs button:nth-child(2n).is-active { background: #f59e0b; }
.op-comanda-tabs button:nth-child(3n).is-active { background: #16a34a; }
.op-comanda-tabs button span { font-size: 1.35rem; }
.op-comanda-product-group.is-hidden { display: none; }
.op-comanda-product-group.is-active { display: block; }
.op-comanda-products-scroll {
max-height: calc(100vh - 300px);
min-height: 420px;
overflow-y: auto;
padding: 18px;
scroll-behavior: smooth;
}
.op-comanda-product-group {
scroll-margin-top: 90px;
}
.op-comanda-product-group + .op-comanda-product-group {
margin-top: 26px;
}
.op-comanda-product-group h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
color: var(--op-ink);
font-size: clamp(1.3rem, 2vw, 1.85rem);
letter-spacing: -.03em;
}
.op-comanda-product-group h2 span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 14px;
background: #f1f5f9;
}
.op-comanda-product-grid {
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
}
.op-touch-product {
min-height: 0;
padding: 10px;
gap: 10px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(20,33,61,.09);
box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.op-touch-product:active {
transform: scale(.985);
}
.op-touch-product-media {
height: 118px;
border-radius: 14px;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.op-touch-product-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.op-touch-product-media span {
font-size: 3rem;
filter: drop-shadow(0 10px 20px rgba(15,23,42,.14));
}
.op-touch-product-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 2px 2px 0;
}
.op-touch-product-head strong {
display: block;
line-height: 1.08;
font-size: 1rem;
}
.op-touch-product-head small {
margin-top: 5px;
font-size: .72rem;
}
.op-touch-product-head b {
color: #b91c1c;
white-space: nowrap;
font-size: .98rem;
}
.op-touch-add-button {
min-height: 46px;
border-radius: 14px;
padding: 9px 12px;
box-shadow: 0 10px 18px rgba(2, 20, 50, .12);
}
.op-touch-add-button b:last-child {
min-width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.18);
}
.op-touch-product-flavors {
grid-column: span 2;
}
.op-touch-flavor-form {
border: 1px solid rgba(20,33,61,.08);
border-radius: 16px;
padding: 10px;
background: #f8fafc;
}
.op-touch-variant-actions {
gap: 8px;
}
.op-comanda-summary {
position: sticky;
top: 14px;
padding: 18px;
display: grid;
gap: 14px;
max-height: calc(100vh - 120px);
overflow-y: auto;
}
.op-comanda-summary-head,
.op-comanda-order-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.op-comanda-summary-head h2,
.op-comanda-order-title h3 {
margin: 0;
color: var(--op-ink);
letter-spacing: -.025em;
}
.op-comanda-account-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.op-comanda-account-box article {
padding: 10px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid rgba(20,33,61,.08);
}
.op-comanda-account-box span {
display: block;
color: var(--op-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-size: .68rem;
font-weight: 850;
}
.op-comanda-account-box strong {
display: block;
margin-top: 4px;
color: var(--op-ink);
font-size: clamp(.92rem, 1.4vw, 1.08rem);
}
.op-comanda-current-order {
display: grid;
gap: 12px;
}
.op-comanda-ticket-lines {
gap: 8px;
}
.op-comanda-ticket-line {
grid-template-columns: auto 1fr auto auto;
border-radius: 14px;
padding: 10px;
background: #fff;
}
.op-line-qty {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: #dc2626;
color: #fff;
font-weight: 950;
}
.op-comanda-ticket-line:nth-child(2n) .op-line-qty { background: #f59e0b; }
.op-comanda-ticket-line:nth-child(3n) .op-line-qty { background: #16a34a; }
.op-comanda-final-total {
border-top: 2px solid rgba(20,33,61,.12);
padding: 14px 0;
}
.op-comanda-final-total strong {
font-size: clamp(1.65rem, 3vw, 2.25rem);
color: var(--op-primary);
}
.op-send-kitchen-button {
min-height: 72px;
background: #16a34a;
box-shadow: 0 16px 30px rgba(22, 163, 74, .25);
}
.op-send-kitchen-button span {
font-size: 1.35rem;
margin-right: 8px;
}
.op-comanda-actions-stack {
display: grid;
gap: 10px;
}
.op-comanda-empty-state {
min-height: 280px;
display: grid;
place-items: center;
text-align: center;
padding: 34px;
border-radius: 22px;
border: 1px dashed rgba(20,33,61,.18);
background: #f8fafc;
}
.op-comanda-empty-state-large {
min-height: calc(100vh - 330px);
margin: 18px;
}
.op-comanda-empty-state h2 {
margin: 0 0 10px;
color: var(--op-ink);
}
.op-comanda-empty-state p {
margin: 0;
color: var(--op-muted);
font-weight: 650;
}
.op-comanda-tools-panel,
.op-comanda-sent-orders {
border-radius: 16px;
border: 1px solid rgba(20,33,61,.08);
background: #f8fafc;
padding: 0;
}
.op-comanda-tools-panel > summary,
.op-comanda-sent-orders > summary {
min-height: 52px;
display: flex;
align-items: center;
padding: 0 14px;
cursor: pointer;
font-weight: 900;
color: var(--op-primary);
list-style: none;
}
.op-comanda-tools-panel > summary::-webkit-details-marker,
.op-comanda-sent-orders > summary::-webkit-details-marker {
display: none;
}
.op-sent-orders-list {
display: grid;
gap: 10px;
padding: 0 12px 12px;
}
.op-empty-release-form-soft {
border-radius: 16px;
}
@media (max-width: 1180px) {
.op-comanda-layout {
grid-template-columns: 1fr;
}
.op-comanda-summary {
position: static;
max-height: none;
order: -1;
}
.op-comanda-products-scroll {
max-height: none;
}
}
@media (max-width: 820px) {
.op-comanda-screen {
width: min(100%, calc(100vw - 16px));
gap: 10px;
}
.op-comanda-hero {
flex-direction: column;
align-items: stretch;
padding: 16px;
min-height: 0;
border-radius: 22px 22px 8px 8px;
}
.op-comanda-hero-status {
min-width: 0;
width: 100%;
}
.op-comanda-menu {
width: 56px;
height: 56px;
flex-basis: 56px;
font-size: 1.7rem;
}
.op-comanda-info-strip {
grid-template-columns: repeat(2, 1fr);
padding: 10px;
}
.op-comanda-info-strip article:nth-child(2n) { border-right: 0; }
.op-comanda-layout {
gap: 10px;
}
.op-comanda-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.op-touch-product-flavors {
grid-column: span 2;
}
.op-touch-product-media {
height: 100px;
}
.op-comanda-account-box {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.op-comanda-product-grid {
grid-template-columns: 1fr;
}
.op-touch-product-flavors {
grid-column: span 1;
}
.op-comanda-info-strip {
grid-template-columns: 1fr;
}
.op-comanda-info-strip article {
border-right: 0;
border-bottom: 1px solid rgba(20,33,61,.08);
}
.op-comanda-info-strip article:last-child { border-bottom: 0; }
}
/* PATCH 022C — Selector visual de pizzas por sabor */
.op-pizza-card .op-touch-product-head small {
color: rgba(10, 30, 68, .62);
}
.op-pizza-config-open {
background: linear-gradient(135deg, #0b2d66, #174a93);
color: #fff;
border-color: transparent;
box-shadow: 0 14px 28px rgba(11, 45, 102, .2);
}
.op-pizza-config-open b {
color: rgba(255,255,255,.9);
}
.op-pizza-modal.is-open {
align-items: center;
}
.op-pizza-config-card {
width: min(760px, calc(100vw - 28px));
max-height: min(92vh, 860px);
overflow: hidden;
padding: 24px;
display: flex;
flex-direction: column;
}
.op-pizza-config-form {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
}
.op-pizza-config-head {
display: flex;
align-items: center;
gap: 14px;
padding-right: 34px;
}
.op-pizza-config-head h2 {
margin: 3px 0 2px;
color: #081d45;
font-size: clamp(1.55rem, 3vw, 2.1rem);
line-height: 1;
}
.op-pizza-config-head p {
margin: 0;
color: rgba(8, 29, 69, .62);
font-weight: 700;
}
.op-pizza-config-icon {
width: 72px;
height: 72px;
border-radius: 22px;
background: #fff7ef;
border: 1px solid rgba(255, 103, 0, .18);
display: grid;
place-items: center;
overflow: hidden;
flex: 0 0 auto;
}
.op-pizza-config-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.op-pizza-config-icon span {
font-size: 2rem;
}
.op-pizza-config-section {
background: #f8fafc;
border: 1px solid rgba(8, 29, 69, .08);
border-radius: 22px;
padding: 14px;
}
.op-pizza-step-title {
display: block;
color: #081d45;
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 10px;
}
.op-pizza-step-row {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.op-pizza-step-row small {
color: rgba(8, 29, 69, .66);
font-weight: 800;
}
.op-pizza-size-grid,
.op-pizza-composition-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.op-pizza-size-button,
.op-pizza-composition-button {
min-height: 74px;
border: 1px solid rgba(8, 29, 69, .1);
border-radius: 18px;
background: #fff;
color: #081d45;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
padding: 12px 14px;
cursor: pointer;
box-shadow: 0 10px 24px rgba(8, 29, 69, .06);
text-align: left;
}
.op-pizza-size-button span,
.op-pizza-composition-button span {
font-weight: 950;
font-size: .95rem;
}
.op-pizza-size-button b {
color: #ff6700;
font-size: 1.02rem;
}
.op-pizza-size-button small,
.op-pizza-composition-button small {
color: rgba(8, 29, 69, .58);
font-weight: 800;
}
.op-pizza-size-button.is-active,
.op-pizza-composition-button.is-active {
background: #082e68;
color: #fff;
border-color: #082e68;
box-shadow: 0 16px 32px rgba(8, 46, 104, .22);
}
.op-pizza-size-button.is-active b,
.op-pizza-size-button.is-active small,
.op-pizza-composition-button.is-active small {
color: rgba(255,255,255,.86);
}
.op-pizza-composition-button.is-disabled {
opacity: .34;
cursor: not-allowed;
box-shadow: none;
}
.op-pizza-flavor-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
max-height: 220px;
overflow: auto;
padding-right: 2px;
}
.op-pizza-flavor-card {
position: relative;
min-height: 58px;
border-radius: 18px;
border: 1px solid rgba(8, 29, 69, .1);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
cursor: pointer;
box-shadow: 0 8px 18px rgba(8, 29, 69, .05);
}
.op-pizza-flavor-card input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.op-pizza-flavor-card span {
font-weight: 900;
color: #081d45;
line-height: 1.1;
}
.op-pizza-flavor-card small {
position: absolute;
top: 6px;
right: 8px;
font-size: .58rem;
letter-spacing: .05em;
color: #ff6700;
font-weight: 950;
}
.op-pizza-flavor-card:has(input:checked) {
background: #e8f5ee;
border-color: #16a05d;
box-shadow: 0 12px 24px rgba(22, 160, 93, .12);
}
.op-pizza-flavor-card:has(input:checked) span {
color: #08713d;
}
.op-pizza-flavor-card.is-disabled {
opacity: .32;
cursor: not-allowed;
box-shadow: none;
}
.op-pizza-flavor-card.is-disabled input {
cursor: not-allowed;
}
.op-pizza-notes-section textarea {
width: 100%;
resize: vertical;
min-height: 72px;
border-radius: 16px;
border: 1px solid rgba(8, 29, 69, .14);
padding: 12px 14px;
font: inherit;
font-weight: 700;
color: #081d45;
background: #fff;
}
.op-pizza-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-radius: 22px;
padding: 16px 18px;
background: #fff;
border: 1px solid rgba(8, 29, 69, .08);
box-shadow: 0 12px 28px rgba(8, 29, 69, .08);
}
.op-pizza-preview span {
display: block;
color: rgba(8, 29, 69, .55);
font-size: .75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
}
.op-pizza-preview strong {
display: block;
color: #081d45;
font-size: 1.05rem;
margin-top: 2px;
}
.op-pizza-preview small {
display: block;
color: rgba(8, 29, 69, .64);
font-weight: 800;
margin-top: 2px;
}
.op-pizza-preview b {
color: #ff6700;
font-size: 1.4rem;
white-space: nowrap;
}
.op-pizza-error {
min-height: 18px;
color: #b91c1c;
font-weight: 950;
text-align: center;
letter-spacing: .04em;
}
@media (max-width: 900px) {
.op-pizza-config-card {
padding: 18px;
}
.op-pizza-size-grid,
.op-pizza-composition-grid,
.op-pizza-flavor-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.op-pizza-config-card {
width: calc(100vw - 20px);
max-height: 94vh;
}
.op-pizza-config-head {
align-items: flex-start;
}
.op-pizza-config-icon {
width: 58px;
height: 58px;
border-radius: 18px;
}
.op-pizza-size-grid,
.op-pizza-composition-grid,
.op-pizza-flavor-grid {
grid-template-columns: 1fr;
}
}
.op-pizza-config-form {
overflow: auto;
padding-right: 2px;
}
/* PATCH 022D — Catalogo directo + modal pizza robusto */
.op-comanda-new-order-hint,
.op-comanda-ready-hint {
border: 1px solid rgba(22, 163, 74, .18);
border-radius: 16px;
padding: 12px 14px;
background: rgba(22, 163, 74, .08);
color: #14532d;
display: grid;
gap: 3px;
}
.op-comanda-new-order-hint strong,
.op-comanda-ready-hint strong {
font-size: .84rem;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 950;
}
.op-comanda-new-order-hint span,
.op-comanda-ready-hint span {
font-size: .86rem;
font-weight: 750;
color: rgba(20, 83, 45, .78);
}
.op-sent-confirmation-card {
border: 1px solid rgba(22, 163, 74, .18);
border-radius: 18px;
background: linear-gradient(135deg, rgba(22, 163, 74, .10), rgba(255,255,255,.96));
padding: 14px;
display: grid;
gap: 10px;
}
.op-sent-confirmation-head {
display: flex;
align-items: center;
gap: 10px;
}
.op-sent-confirmation-head > span {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: #16a34a;
color: #fff;
font-weight: 950;
}
.op-sent-confirmation-head strong,
.op-sent-confirmation-head small {
display: block;
}
.op-sent-confirmation-head strong {
color: #14532d;
font-weight: 950;
letter-spacing: .03em;
}
.op-sent-confirmation-head small {
color: rgba(20, 83, 45, .72);
font-weight: 800;
}
.op-sent-confirmation-lines {
display: grid;
gap: 6px;
}
.op-sent-confirmation-lines div {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: baseline;
padding: 7px 9px;
border-radius: 12px;
background: rgba(255,255,255,.76);
color: #0f172a;
font-size: .86rem;
font-weight: 750;
}
.op-sent-confirmation-lines b {
color: #14532d;
white-space: nowrap;
}
.op-sent-confirmation-note {
color: rgba(20, 83, 45, .76);
font-weight: 800;
}
.op-pizza-modal {
padding: 14px;
z-index: 80;
}
.op-pizza-config-card {
display: block;
overflow: hidden;
padding: 0;
width: min(820px, calc(100vw - 24px));
max-height: min(94vh, 900px);
}
.op-pizza-config-card .op-modal-close {
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.92);
color: #0f172a;
box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.op-pizza-config-form {
max-height: inherit;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 0;
overflow: hidden;
padding: 0;
}
.op-pizza-config-head {
padding: 22px 70px 16px 22px;
border-bottom: 1px solid rgba(8, 29, 69, .08);
background: #fff;
}
.op-pizza-config-body {
min-height: 0;
overflow: auto;
padding: 16px 18px;
display: grid;
gap: 14px;
background: #f8fafc;
}
.op-pizza-config-footer {
display: grid;
gap: 10px;
padding: 14px 18px 18px;
border-top: 1px solid rgba(8, 29, 69, .08);
background: #fff;
box-shadow: 0 -12px 28px rgba(8, 29, 69, .06);
}
.op-pizza-composition-button.is-disabled,
.op-pizza-composition-button[disabled] {
opacity: .38;
background: #eef2f7;
border-style: dashed;
box-shadow: none;
}
.op-pizza-flavor-card.is-disabled input {
pointer-events: none;
}
@media (max-width: 760px) {
.op-pizza-config-form {
grid-template-rows: auto minmax(0, 1fr) auto;
}
.op-pizza-config-head {
padding: 18px 62px 14px 16px;
}
.op-pizza-config-body {
padding: 12px;
}
.op-pizza-config-footer {
padding: 12px;
}
}
/* PATCH 022E — Correcciones flujo catálogo/pizza */
.op-pizza-static-size-section .op-pizza-size-grid {
grid-template-columns: minmax(0, 1fr);
}
.op-pizza-static-size {
min-height: 68px;
}
.op-pizza-config-note {
margin: 10px 2px 0;
color: rgba(8, 29, 69, .62);
font-weight: 750;
font-size: .82rem;
line-height: 1.35;
}
.op-pizza-composition-button.is-disabled {
pointer-events: auto;
}
.op-pizza-modal .op-modal-backdrop {
cursor: default;
}
/* PATCH 023 — Modal pizza fuera del grid, categoría persistente y cache control */
body.op-modal-open {
overflow: hidden;
}
.op-modal.is-open {
pointer-events: auto;
}
.op-modal-card {
z-index: 2;
}
.op-pizza-modal {
z-index: 120;
}
.op-pizza-modal .op-modal-backdrop {
z-index: 1;
pointer-events: auto;
}
.op-pizza-config-card {
position: relative;
z-index: 2;
}
.op-pizza-size-button,
.op-pizza-composition-button,
.op-pizza-flavor-card,
.op-pizza-config-open,
.op-touch-add-button {
touch-action: manipulation;
user-select: none;
}
.op-pizza-flavor-card input {
z-index: 2;
}
.op-pizza-flavor-card span,
.op-pizza-flavor-card small {
position: relative;
z-index: 1;
pointer-events: none;
}
.op-pizza-error:not(:empty) {
padding: 8px 10px;
border-radius: 12px;
background: rgba(185, 28, 28, .08);
border: 1px solid rgba(185, 28, 28, .16);
}
/* PATCH 024 — Resumen visible de pedidos enviados en mesa */
.op-comanda-sent-summary {
border: 1px solid rgba(20, 33, 61, .10);
border-radius: 18px;
background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(255, 255, 255, .98));
padding: 14px;
display: grid;
gap: 12px;
}
.op-sent-summary-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.op-sent-summary-head h3 {
margin: 0;
color: var(--op-ink);
letter-spacing: -.025em;
font-size: 1.08rem;
}
.op-sent-summary-count {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(6, 37, 91, .08);
color: var(--op-primary);
font-size: .74rem;
font-weight: 900;
white-space: nowrap;
}
.op-sent-summary-list {
display: grid;
gap: 10px;
}
.op-sent-summary-order {
display: grid;
gap: 9px;
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 16px;
background: #fff;
padding: 11px;
box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}
.op-sent-summary-order-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
}
.op-sent-summary-order-head strong,
.op-sent-summary-order-head small {
display: block;
}
.op-sent-summary-order-head strong {
color: var(--op-ink);
font-weight: 950;
letter-spacing: .02em;
}
.op-sent-summary-order-head small {
margin-top: 2px;
color: var(--op-muted);
font-size: .74rem;
font-weight: 800;
}
.op-sent-summary-order-head b {
color: var(--op-primary);
font-size: .98rem;
white-space: nowrap;
}
.op-sent-summary-lines {
display: grid;
gap: 7px;
}
.op-sent-summary-line {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
padding: 8px 9px;
border-radius: 13px;
background: rgba(248, 250, 252, .96);
}
.op-sent-summary-qty {
color: var(--op-primary);
font-weight: 950;
font-size: .86rem;
line-height: 1.25;
}
.op-sent-summary-name {
min-width: 0;
}
.op-sent-summary-name strong,
.op-sent-summary-name small {
display: block;
}
.op-sent-summary-name strong {
color: var(--op-ink);
font-size: .86rem;
font-weight: 850;
line-height: 1.25;
}
.op-sent-summary-name small {
margin-top: 2px;
color: var(--op-muted);
font-size: .72rem;
font-weight: 750;
}
.op-sent-summary-price {
color: var(--op-ink);
font-weight: 900;
font-size: .84rem;
white-space: nowrap;
}
.op-sent-summary-adjustments {
display: grid;
gap: 4px;
padding-top: 2px;
}
.op-sent-summary-adjustments small {
color: #14532d;
font-size: .74rem;
font-weight: 800;
}
@media (max-width: 520px) {
.op-sent-summary-head,
.op-sent-summary-order-head {
grid-template-columns: 1fr;
display: grid;
}
.op-sent-summary-count {
justify-self: start;
}
.op-sent-summary-line {
grid-template-columns: 30px minmax(0, 1fr);
}
.op-sent-summary-price {
grid-column: 2;
justify-self: start;
}
}
/* PATCH 025 — Check de entrega física a mesa por ítem */
.op-sent-summary-line {
grid-template-columns: 34px minmax(0, 1fr) auto minmax(92px, auto);
align-items: center;
border: 1px solid transparent;
}
.op-sent-summary-line.is-served-to-table {
background: rgba(18, 128, 92, .07);
border-color: rgba(18, 128, 92, .16);
}
.op-table-service-control {
display: grid;
justify-items: end;
gap: 3px;
min-width: 88px;
}
.op-table-service-control form {
margin: 0;
}
.op-table-service-btn {
border: 1px solid rgba(6, 37, 91, .16);
border-radius: 999px;
background: #fff;
color: var(--op-primary);
min-height: 32px;
padding: 6px 9px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: .7rem;
font-weight: 950;
line-height: 1;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
}
.op-table-service-btn span {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(6, 37, 91, .08);
font-size: .82rem;
}
.op-table-service-btn em {
font-style: normal;
}
.op-table-service-btn.is-served {
border-color: rgba(18, 128, 92, .28);
background: rgba(18, 128, 92, .12);
color: #14532d;
}
.op-table-service-btn.is-served span {
background: #16a34a;
color: #fff;
}
.op-table-service-btn.is-disabled {
cursor: not-allowed;
color: #64748b;
background: rgba(226, 232, 240, .82);
border-color: rgba(148, 163, 184, .24);
box-shadow: none;
}
.op-table-service-btn.is-disabled span {
background: rgba(148, 163, 184, .18);
color: #64748b;
}
.op-table-service-meta {
color: #14532d;
font-size: .63rem;
font-weight: 800;
text-align: right;
max-width: 118px;
line-height: 1.15;
}
@media (max-width: 820px) {
.op-sent-summary-line {
grid-template-columns: 30px minmax(0, 1fr) auto;
}
.op-table-service-control {
grid-column: 2 / -1;
justify-self: start;
justify-items: start;
min-width: 0;
}
.op-sent-summary-price {
grid-column: auto;
justify-self: end;
}
.op-table-service-meta {
text-align: left;
max-width: 100%;
}
}
/* PATCH 026 — Pulido comanda: menos ruido visual y menor peso tipográfico */
.op-comanda-screen .op-kicker,
.op-comanda-info-strip small,
.op-comanda-account-box span,
.op-sent-summary-order-head small,
.op-sent-summary-name small,
.op-sent-summary-adjustments small,
.op-table-service-meta {
font-weight: 600;
}
.op-comanda-info-strip strong,
.op-comanda-summary-head h2,
.op-comanda-order-title h3,
.op-comanda-account-box strong,
.op-sent-summary-head h3,
.op-sent-summary-order-head strong,
.op-sent-summary-order-head b,
.op-sent-summary-qty,
.op-sent-summary-name strong,
.op-sent-summary-price,
.op-table-service-btn {
font-weight: 700;
}
.op-comanda-screen .op-status,
.op-sent-summary-count {
font-weight: 650;
}
/* PATCH 027 — Sabor base fijo en pizzas de sabor */
.op-pizza-config-form.is-pizza-base-single-lock .op-pizza-flavor-grid {
grid-template-columns: minmax(0, 1fr);
max-height: none;
overflow: visible;
}
.op-pizza-flavor-card.is-base-flavor {
border-color: rgba(245, 158, 11, .56);
background: #fff4df;
box-shadow: 0 12px 24px rgba(245, 158, 11, .13);
}
.op-pizza-flavor-card.is-base-flavor span {
color: #945308;
}
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card:has(input:checked):not(.is-base-flavor) {
border-color: rgba(22, 160, 93, .46);
background: #e8f5ee;
box-shadow: 0 12px 24px rgba(22, 160, 93, .12);
}
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card:has(input:checked):not(.is-base-flavor) span {
color: #08713d;
}
.op-pizza-flavor-card.is-locked {
cursor: default;
}
.op-pizza-flavor-card.is-locked input {
cursor: default;
}
.op-pizza-flavor-card.is-hidden-by-base-lock {
display: none;
}
/* PATCH 039 — Diferenciación visual de sabor base y agregados */
.op-pizza-flavor-card.is-base-flavor small {
display: none;
}
.op-branch-sound-card {
background: rgba(18,128,92,.045);
border-color: rgba(18,128,92,.12);
}
.op-sound-help {
background: rgba(255,255,255,.72);
border: 1px solid rgba(20,33,61,.07);
border-radius: 14px;
padding: 10px 12px;
}
.op-sound-upload-grid {
display: grid;
gap: 12px;
}
.op-sound-upload-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(220px, .9fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 16px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(20,33,61,.08);
}
.op-sound-upload-copy {
display: grid;
gap: 4px;
}
.op-sound-upload-copy span {
color: var(--op-text);
font-size: .95rem;
font-weight: 620;
}
.op-sound-upload-copy small,
.op-sound-current small {
color: var(--op-muted);
font-size: .82rem;
line-height: 1.35;
}
.op-sound-upload-row input[type=file] {
min-height: 46px;
padding: 10px;
background: #fff;
}
.op-sound-current {
grid-column: 1 / -1;
display: grid;
gap: 8px;
padding-top: 4px;
}
.op-sound-current audio {
width: min(420px, 100%);
}
@media (max-width: 760px) {
.op-sound-upload-row {
grid-template-columns: 1fr;
}
}
/* PATCH 037 — Liberación operativa de mesa saldada por mozo */
.op-paid-release-card {
display: grid;
gap: 10px;
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(20,33,61,.09);
background: #f8fafc;
}
.op-paid-release-card.is-ready {
border-color: rgba(18,128,92,.20);
background: rgba(18,128,92,.06);
}
.op-paid-release-card.is-blocked {
border-color: rgba(245,158,11,.22);
background: rgba(245,158,11,.07);
}
.op-paid-release-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
}
.op-paid-release-head > span {
width: 38px;
height: 38px;
border-radius: 14px;
display: grid;
place-items: center;
background: #fff;
color: var(--op-success);
box-shadow: 0 10px 24px rgba(20,33,61,.08);
font-weight: 700;
}
.op-paid-release-card.is-blocked .op-paid-release-head > span {
color: var(--op-warning);
}
.op-paid-release-head small {
display: block;
color: var(--op-muted);
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.op-paid-release-head h3 {
margin: 1px 0 0;
color: var(--op-text);
font-size: 1rem;
font-weight: 680;
}
.op-paid-release-card p {
margin: 0;
color: var(--op-muted);
font-size: .82rem;
line-height: 1.35;
}
.op-btn-success {
background: var(--op-success);
color: #fff;
}
/* PATCH 038 · Caja como apoyo a mesa */
.op-cashier-table-help {
margin-bottom: 16px;
padding: 18px 20px;
}
.op-cashier-table-help h2 {
margin: 4px 0 6px;
font-weight: 620;
letter-spacing: -.02em;
}
.op-cashier-table-help p {
margin: 0;
color: var(--op-muted);
}
.op-cashier-table-session .op-comanda-hero-kicker {
color: var(--op-primary);
}
.op-cashier-table-session .op-comanda-order-card,
.op-cashier-table-session .op-sent-table-consumption,
.op-cashier-table-session .op-sent-summary-box {
background: rgba(255,255,255,.96);
border: 1px solid rgba(20,33,61,.08);
border-radius: 22px;
padding: 14px;
box-shadow: 0 12px 28px rgba(20,33,61,.07);
}
.op-cashier-table-session .op-sent-summary-box {
display: grid;
gap: 3px;
background: rgba(18,128,92,.08);
border-color: rgba(18,128,92,.14);
}
.op-cashier-table-session .op-sent-summary-box span,
.op-cashier-table-session .op-comanda-card-head span {
color: var(--op-muted);
font-size: .74rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.op-cashier-table-session .op-sent-summary-box strong,
.op-cashier-table-session .op-comanda-card-head strong {
color: var(--op-text);
font-weight: 650;
}
.op-cashier-table-session .op-sent-summary-box small {
color: var(--op-muted);
}
.op-cashier-table-session .op-sent-table-orders-list,
.op-cashier-table-session .op-sent-table-item-list {
display: grid;
gap: 10px;
}
.op-cashier-table-session .op-sent-table-orders-list {
margin-top: 12px;
}
.op-cashier-table-session .op-sent-table-order-card {
display: grid;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: rgba(6,37,91,.045);
border: 1px solid rgba(20,33,61,.06);
}
.op-cashier-table-session .op-sent-table-order-head,
.op-cashier-table-session .op-sent-table-item-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
.op-cashier-table-session .op-sent-table-order-head strong,
.op-cashier-table-session .op-sent-table-item-row strong {
display: block;
font-weight: 650;
line-height: 1.2;
}
.op-cashier-table-session .op-sent-table-order-head small,
.op-cashier-table-session .op-sent-table-item-row small {
display: block;
margin-top: 2px;
color: var(--op-muted);
font-size: .78rem;
}
.op-cashier-table-session .op-sent-table-item-row {
padding: 9px 10px;
border-radius: 14px;
background: #fff;
}
.op-table-served-toggle {
min-height: 36px;
border: 0;
border-radius: 999px;
padding: 0 12px;
background: var(--op-primary);
color: #fff;
font-weight: 650;
}
.op-table-served-toggle.is-served {
min-width: 42px;
background: var(--op-success);
}
@media (max-width: 760px) {
.op-cashier-table-session .op-sent-table-order-head,
.op-cashier-table-session .op-sent-table-item-row {
grid-template-columns: 1fr;
}
}
/* PATCH 040 — Composición y sabores en fila compacta */
.op-pizza-composition-flavor-row {
display: grid;
grid-template-columns: minmax(220px, .92fr) minmax(0, 1.08fr);
gap: 14px;
align-items: start;
}
.op-pizza-composition-flavor-row .op-pizza-config-section {
height: 100%;
}
.op-pizza-composition-flavor-row .op-pizza-composition-grid,
.op-pizza-composition-flavor-row .op-pizza-flavor-grid {
grid-template-columns: minmax(0, 1fr);
}
.op-pizza-composition-flavor-row .op-pizza-composition-button {
min-height: 58px;
}
.op-pizza-composition-flavor-row .op-pizza-flavor-grid {
max-height: none;
overflow: visible;
padding-right: 0;
}
.op-pizza-composition-flavor-row .op-pizza-flavor-card {
min-height: 52px;
justify-content: flex-start;
text-align: left;
padding-inline: 14px;
}
.op-pizza-composition-flavor-row .op-pizza-flavor-card span {
text-align: left;
}
@media (max-width: 820px) {
.op-pizza-composition-flavor-row {
grid-template-columns: 1fr;
}
.op-pizza-composition-flavor-row .op-pizza-flavor-grid {
max-height: none;
overflow: visible;
}
}
/* PATCH 041 — Modal pizza: sin scroll interno en sabores y base informativa */
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card.is-base-flavor,
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card.is-base-flavor:has(input:checked),
.op-pizza-composition-flavor-row .op-pizza-flavor-card.is-base-flavor,
.op-pizza-composition-flavor-row .op-pizza-flavor-card.is-base-flavor:has(input:checked) {
border-color: rgba(245, 158, 11, .58);
background: #fff3dc;
box-shadow: 0 10px 22px rgba(245, 158, 11, .13);
}
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card.is-base-flavor span,
.op-pizza-config-form.has-pizza-base-flavor .op-pizza-flavor-card.is-base-flavor:has(input:checked) span,
.op-pizza-composition-flavor-row .op-pizza-flavor-card.is-base-flavor span,
.op-pizza-composition-flavor-row .op-pizza-flavor-card.is-base-flavor:has(input:checked) span {
color: #9a5a09;
}
.op-pizza-composition-flavor-row .op-pizza-flavors-section {
height: auto;
align-self: start;
}
/* PATCH 042 · Order item display: category/product + compact observation chips */
.op-order-item-detail {
color: var(--op-muted) !important;
font-size: .74rem !important;
font-weight: 650 !important;
line-height: 1.25 !important;
}
.op-order-note-chip {
width: max-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 24px;
margin-top: 5px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 107, 0, .11);
border: 1px solid rgba(255, 107, 0, .26);
color: #9a3412;
font-size: .72rem;
font-weight: 750;
line-height: 1.2;
}
.op-sent-summary-name .op-order-note-chip,
.op-cashier-table-session .op-order-note-chip,
.op-ticket-line .op-order-note-chip {
margin-bottom: 2px;
}
/* PATCH 043 · Pizza quantity + cleaner sent item visual */
.op-pizza-quantity-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border-radius: 18px;
background: rgba(255, 103, 0, .07);
border: 1px solid rgba(255, 103, 0, .16);
}
.op-pizza-quantity-control > span {
color: rgba(8, 29, 69, .62);
font-size: .78rem;
font-weight: 850;
letter-spacing: .05em;
text-transform: uppercase;
}
.op-pizza-quantity-control > div {
display: inline-grid;
grid-template-columns: 44px 74px 44px;
gap: 8px;
align-items: center;
}
.op-pizza-quantity-control button {
width: 44px;
height: 44px;
border: 0;
border-radius: 14px;
background: #081d45;
color: #fff;
font-size: 1.18rem;
font-weight: 850;
line-height: 1;
}
.op-pizza-quantity-control input {
width: 74px;
height: 44px;
border-radius: 14px;
border: 1px solid rgba(8, 29, 69, .16);
background: #fff;
color: #081d45;
font: inherit;
font-size: 1rem;
font-weight: 850;
text-align: center;
}
.op-pizza-quantity-control input::-webkit-outer-spin-button,
.op-pizza-quantity-control input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.op-pizza-quantity-control input[type="number"] {
-moz-appearance: textfield;
}
.op-sent-summary-name .op-order-item-detail:last-child,
.op-sent-table-item-row .op-order-item-detail:last-child {
margin-bottom: 0;
}
@media (max-width: 760px) {
.op-pizza-quantity-control {
align-items: stretch;
flex-direction: column;
}
.op-pizza-quantity-control > div {
width: 100%;
grid-template-columns: 52px 1fr 52px;
}
.op-pizza-quantity-control button,
.op-pizza-quantity-control input {
width: 100%;
}
}
/* PATCH 045 · Nombre visible de pedido */
.op-display-name-field {
display: grid;
gap: 5px;
margin: 10px 0;
color: var(--op-text);
font-size: .78rem;
font-weight: 620;
}
.op-display-name-field input {
width: 100%;
min-height: 44px;
border: 1px solid rgba(20,33,61,.12);
border-radius: 14px;
padding: 0 12px;
background: #fff;
color: var(--op-text);
font: inherit;
font-weight: 520;
}
.op-display-name-field input:focus {
outline: 2px solid rgba(255,107,0,.18);
border-color: rgba(255,107,0,.32);
}
.op-display-name-field small {
color: var(--op-muted);
font-size: .72rem;
font-weight: 500;
line-height: 1.25;
}
.op-display-name-field-compact {
margin: 8px 0 10px;
}
.op-display-name-field-modal {
margin: 0 0 12px;
text-align: left;
}
.op-public-name-chip {
width: max-content;
max-width: 100%;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(255,107,0,.12);
color: #9a3412;
font-size: .72rem;
font-weight: 650;
line-height: 1.2;
}
.op-delivery-paid-note {
display: grid;
gap: 4px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(18,128,92,.10);
border: 1px solid rgba(18,128,92,.18);
color: var(--op-success);
}
.op-delivery-paid-note span,
.op-delivery-paid-note strong {
display: block;
}
.op-delivery-paid-note span {
font-size: .76rem;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 680;
}
.op-delivery-paid-note strong {
color: var(--op-text);
font-size: .92rem;
font-weight: 680;
}
/* PATCH 047 — Caja POS visual clara por canales */
.op-station-shell-wide.op-cashier-shell-clean {
background:
radial-gradient(circle at top left, rgba(255, 107, 0, .12), transparent 34%),
linear-gradient(180deg, #fff8ef 0%, #f4f7fb 54%, #eef3f8 100%);
}
.op-cashier-screen-v2 {
width: min(1640px, 100%);
gap: 16px;
}
.op-cashier-hero {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 18px;
padding: clamp(20px, 3vw, 30px);
border-radius: 30px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 22px 58px rgba(94, 60, 26, .10);
}
.op-cashier-hero-main {
display: grid;
align-content: center;
gap: 7px;
}
.op-cashier-hero-main h1 {
margin: 0;
font-size: clamp(2.4rem, 6vw, 5rem);
line-height: .9;
letter-spacing: -.055em;
font-weight: 740;
}
.op-cashier-hero-main span {
color: var(--op-muted);
font-size: .96rem;
font-weight: 560;
}
.op-cashier-hero-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.op-cashier-hero-actions article {
min-width: 138px;
min-height: 70px;
display: grid;
align-content: center;
gap: 3px;
padding: 12px 14px;
border-radius: 20px;
background: rgba(6,37,91,.045);
border: 1px solid rgba(20,33,61,.07);
}
.op-cashier-hero-actions article span {
color: var(--op-muted);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 650;
}
.op-cashier-hero-actions article strong {
color: var(--op-text);
font-size: 1.05rem;
font-weight: 680;
}
.op-cashier-warning-panel,
.op-cashier-empty-panel {
padding: 22px;
border-radius: 26px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(180,35,24,.14);
box-shadow: 0 18px 44px rgba(94,60,26,.08);
}
.op-cashier-warning-panel h2,
.op-cashier-empty-panel h2 {
margin: 0 0 6px;
font-size: 1.35rem;
font-weight: 680;
}
.op-cashier-warning-panel p,
.op-cashier-empty-panel p {
margin: 0;
color: var(--op-muted);
font-weight: 520;
}
.op-cashier-channel-board {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.op-cashier-channel-card {
min-height: 116px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 18px;
border-radius: 26px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 18px 44px rgba(94,60,26,.08);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.op-cashier-channel-card:hover {
transform: translateY(-2px);
box-shadow: 0 22px 52px rgba(94,60,26,.12);
}
.op-cashier-channel-card.is-table { border-color: rgba(180,35,24,.20); }
.op-cashier-channel-card.is-takeaway { border-color: rgba(255,107,0,.26); }
.op-cashier-channel-card.is-pickup { border-color: rgba(18,128,92,.22); }
.op-cashier-channel-card.is-delivery { border-color: rgba(6,87,184,.22); }
.op-cashier-channel-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(6,37,91,.055);
font-size: 1.45rem;
}
.op-cashier-channel-card.is-table .op-cashier-channel-icon { background: rgba(180,35,24,.09); }
.op-cashier-channel-card.is-takeaway .op-cashier-channel-icon { background: rgba(255,107,0,.10); }
.op-cashier-channel-card.is-pickup .op-cashier-channel-icon { background: rgba(18,128,92,.09); }
.op-cashier-channel-card.is-delivery .op-cashier-channel-icon { background: rgba(6,87,184,.09); }
.op-cashier-channel-card strong,
.op-cashier-channel-card small {
display: block;
}
.op-cashier-channel-card strong {
color: var(--op-text);
font-size: clamp(1.02rem, 2vw, 1.24rem);
line-height: 1.05;
font-weight: 700;
}
.op-cashier-channel-card small {
margin-top: 5px;
color: var(--op-muted);
font-size: .84rem;
font-weight: 520;
}
.op-cashier-channel-card em {
min-width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: rgba(6,37,91,.075);
color: var(--op-text);
font-style: normal;
font-weight: 720;
}
.op-cashier-layout-v2 {
grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
gap: 16px;
}
.op-cashier-section-head-v2 {
margin-bottom: 0;
border: 1px solid rgba(20,33,61,.07);
box-shadow: 0 14px 32px rgba(94,60,26,.06);
}
.op-cashier-section-head-v2 h2 {
margin: 2px 0 0;
font-size: clamp(1.28rem, 3vw, 1.8rem);
font-weight: 690;
letter-spacing: -.025em;
}
.op-cashier-grid-v2,
.op-channel-order-grid-v2 {
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 14px;
}
.op-cashier-table-card-v2,
.op-channel-order-card-v2,
.op-cashier-side-v2 article {
border-radius: 26px;
border: 1px solid rgba(20,33,61,.08);
background: rgba(255,255,255,.97);
box-shadow: 0 18px 44px rgba(94,60,26,.08);
}
.op-cashier-table-card-v2.is-paid {
border-color: rgba(18,128,92,.18);
}
.op-cashier-table-card-v2.is-pending {
border-color: rgba(183,121,31,.20);
}
.op-channel-order-card-v2.channel-takeaway { border-left: 5px solid var(--op-secondary); }
.op-channel-order-card-v2.channel-pickup { border-left: 5px solid var(--op-success); }
.op-channel-order-card-v2.channel-delivery { border-left: 5px solid #0657b8; }
.op-cashier-card-head {
margin-bottom: 12px;
}
.op-cashier-card-head h2,
.op-cashier-card-head strong {
font-size: clamp(1.15rem, 2.7vw, 1.55rem);
line-height: 1.05;
font-weight: 710;
letter-spacing: -.025em;
}
.op-account-mini-grid-v2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-account-mini-grid-v2 article {
border-radius: 16px;
background: rgba(6,37,91,.045);
border: 1px solid rgba(20,33,61,.055);
padding: 10px 12px;
}
.op-account-mini-grid-v2 span {
display: block;
color: var(--op-muted);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 650;
}
.op-account-mini-grid-v2 strong {
display: block;
margin-top: 4px;
font-size: 1.02rem;
font-weight: 680;
}
.op-cash-order-lines-v2 {
margin-top: 12px;
}
.op-cash-order-lines-v2 > div,
.op-payment-mini-list > div {
background: rgba(6,37,91,.045);
border: 1px solid rgba(20,33,61,.055);
}
.op-payment-form-v2 {
padding: 14px;
border-radius: 20px;
background: rgba(6,37,91,.035);
border: 1px solid rgba(20,33,61,.055);
}
.op-payment-form-row {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 10px;
}
.op-cashier-soft-note {
padding: 12px 14px;
border-radius: 16px;
background: rgba(18,128,92,.07);
border: 1px solid rgba(18,128,92,.10);
}
.op-close-blockers-v2 {
margin-top: 12px;
}
.op-channel-card-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.op-cashier-side-v2 {
position: sticky;
top: 14px;
}
.op-cashier-side-v2 article {
text-align: left;
}
.op-cashier-side-v2 h2 {
margin: 4px 0 10px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.02em;
}
.op-cashier-side-card-main strong {
display: block;
margin-top: 4px;
font-size: 1.35rem;
color: var(--op-text);
}
@media (max-width: 1180px) {
.op-cashier-channel-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-cashier-layout-v2 {
grid-template-columns: 1fr;
}
.op-cashier-side-v2 {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.op-cashier-hero {
flex-direction: column;
}
.op-cashier-hero-actions {
justify-content: stretch;
}
.op-cashier-hero-actions article,
.op-cashier-hero-actions form,
.op-cashier-hero-actions button {
width: 100%;
flex: 1;
}
.op-cashier-channel-board,
.op-cashier-side-v2,
.op-payment-form-row,
.op-channel-card-actions {
grid-template-columns: 1fr;
}
.op-cashier-grid-v2,
.op-channel-order-grid-v2 {
grid-template-columns: 1fr;
}
}
/* PATCH 048 · pagos divididos */
.op-payment-split-form {
gap: 12px;
}
.op-payment-split-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(6, 37, 91, .045);
border: 1px solid rgba(20, 33, 61, .07);
}
.op-payment-split-head span,
.op-payment-split-head strong {
display: block;
}
.op-payment-split-head span {
color: var(--op-muted);
font-size: .72rem;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 620;
}
.op-payment-split-head strong {
margin-top: 2px;
color: var(--op-text);
font-size: .88rem;
font-weight: 640;
}
.op-payment-lines {
display: grid;
gap: 10px;
}
.op-payment-line {
display: grid;
gap: 10px;
padding: 10px;
border-radius: 18px;
background: rgba(255, 255, 255, .86);
border: 1px solid rgba(20, 33, 61, .08);
}
.op-payment-line-main {
display: grid;
grid-template-columns: minmax(110px, .85fr) minmax(140px, 1fr) auto;
gap: 8px;
align-items: end;
}
.op-payment-line-detail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-payment-remove {
width: 42px;
height: 42px;
border: 0;
border-radius: 14px;
background: rgba(180, 35, 24, .09);
color: var(--op-danger);
font-size: 1.25rem;
line-height: 1;
font-weight: 760;
}
.op-payment-remove.is-disabled,
.op-payment-remove:disabled {
opacity: .35;
cursor: not-allowed;
}
.op-payment-split-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(18, 128, 92, .07);
border: 1px solid rgba(18, 128, 92, .13);
}
.op-payment-split-summary span,
.op-payment-split-summary em {
color: var(--op-muted);
font-size: .82rem;
font-style: normal;
font-weight: 560;
}
.op-payment-split-summary strong {
color: var(--op-text);
font-weight: 720;
}
.op-payment-split-summary em.is-ok {
color: var(--op-success);
font-weight: 720;
}
.op-payment-split-summary em.is-warn {
color: #9a5a00;
font-weight: 720;
}
.op-payment-split-summary em.is-danger {
color: var(--op-danger);
font-weight: 720;
}
@media (max-width: 720px) {
.op-payment-line-main,
.op-payment-line-detail {
grid-template-columns: 1fr;
}
.op-payment-remove {
width: 100%;
}
.op-payment-split-head,
.op-payment-split-summary {
align-items: stretch;
flex-direction: column;
}
}
.op-btn-sm {
min-height: 36px;
padding: 0 12px;
border-radius: 12px;
font-size: .82rem;
}
/* PATCH 049 · pago dividido por pasos */
/* PATCH 050 · pago dividido compacto + campos crédito condicionados */
.op-payment-split-head {
background: rgba(255,255,255,.88);
}
.op-payment-split-amount {
text-align: right;
}
.op-payment-composer {
display: grid;
gap: 8px;
padding: 10px;
overflow: hidden;
border-radius: 18px;
background: rgba(6, 37, 91, .035);
border: 1px solid rgba(20, 33, 61, .07);
}
.op-payment-composer-main {
display: grid;
grid-template-columns: minmax(84px, .76fr) minmax(112px, 1fr) 48px;
gap: 8px;
align-items: end;
}
.op-payment-composer-main > label,
.op-payment-composer-detail > * {
min-width: 0;
}
.op-payment-composer-detail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-payment-composer-detail[hidden],
.op-payment-credit-detail[hidden],
.op-payment-change-preview[hidden] {
display: none !important;
}
.op-payment-change-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
border-radius: 14px;
background: rgba(6, 37, 91, .055);
border: 1px solid rgba(6, 37, 91, .09);
color: var(--op-muted);
font-size: .78rem;
font-weight: 580;
}
.op-payment-change-preview strong {
margin-left: 4px;
color: var(--op-text);
font-size: .86rem;
}
.op-payment-change-preview.has-change {
background: rgba(18, 128, 92, .09);
border-color: rgba(18, 128, 92, .18);
}
.op-payment-change-preview.has-change span:last-child strong {
color: var(--op-success);
}
.op-payment-change-note {
margin: -1px 0 2px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(242, 153, 0, .075);
color: var(--op-muted);
font-size: .75rem;
line-height: 1.35;
}
.op-payment-add-method {
width: 48px;
min-width: 48px;
height: 48px;
min-height: 48px;
padding: 0;
border-radius: 16px;
font-size: 1.55rem;
line-height: 1;
font-weight: 780;
white-space: nowrap;
}
.op-payment-added-list {
display: grid;
gap: 8px;
}
.op-payment-empty {
margin: 0;
padding: 10px 12px;
border-radius: 16px;
background: rgba(20, 33, 61, .045);
color: var(--op-muted);
font-size: .82rem;
font-weight: 560;
}
.op-payment-added-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 16px;
background: rgba(18, 128, 92, .075);
border: 1px solid rgba(18, 128, 92, .16);
}
.op-payment-added-copy {
min-width: 0;
}
.op-payment-added-copy strong,
.op-payment-added-copy span {
display: block;
}
.op-payment-added-copy strong {
color: var(--op-text);
font-size: .9rem;
font-weight: 680;
}
.op-payment-added-copy span {
margin-top: 2px;
color: var(--op-muted);
font-size: .76rem;
font-weight: 520;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-payment-added-card > b {
color: var(--op-success);
font-size: .92rem;
font-weight: 760;
white-space: nowrap;
}
.op-payment-split-form [data-payment-submit]:disabled,
.op-payment-split-form [data-payment-add]:disabled {
opacity: .48;
cursor: not-allowed;
}
@media (max-width: 820px) {
.op-payment-composer-main,
.op-payment-composer-detail {
grid-template-columns: 1fr;
}
.op-payment-added-card {
grid-template-columns: 1fr auto;
}
.op-payment-added-card > b {
grid-column: 1 / 2;
}
.op-payment-added-card .op-payment-remove {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
}
/* PATCH 051 · Caja compacta unificada, pagos parciales y modales internos */
.op-cashier-screen-v3 {
width: min(1720px, 100%);
gap: 14px;
}
.op-cashier-topbar {
display: grid;
grid-template-columns: minmax(170px, .72fr) minmax(420px, 1.45fr) auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
border-radius: 28px;
background: rgba(255,255,255,.97);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 18px 46px rgba(94,60,26,.09);
}
.op-cashier-title-block {
min-width: 0;
}
.op-cashier-title-block h1 {
margin: 2px 0 0;
color: var(--op-text);
font-size: clamp(1.85rem, 4.2vw, 3.4rem);
line-height: .88;
letter-spacing: -.052em;
font-weight: 735;
}
.op-cashier-channel-strip {
min-width: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.op-cashier-channel-strip a {
min-width: 0;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 10px;
border-radius: 16px;
background: rgba(6,37,91,.045);
border: 1px solid rgba(20,33,61,.07);
color: var(--op-text);
font-weight: 650;
text-align: center;
white-space: nowrap;
}
.op-cashier-channel-strip a:hover {
border-color: rgba(180,35,24,.22);
background: rgba(180,35,24,.055);
}
.op-cashier-channel-strip b {
min-width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: rgba(20,33,61,.08);
color: var(--op-muted);
font-size: .78rem;
font-weight: 730;
}
.op-cashier-topbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.op-cashier-total-due {
min-width: 150px;
display: grid;
gap: 3px;
padding: 10px 14px;
border-radius: 18px;
background: rgba(180,35,24,.07);
border: 1px solid rgba(180,35,24,.12);
}
.op-cashier-total-due span {
color: var(--op-muted);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .055em;
font-weight: 650;
}
.op-cashier-total-due strong {
color: var(--op-text);
font-size: 1.12rem;
font-weight: 740;
}
.op-cashier-layout-v3 {
grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
gap: 14px;
align-items: start;
}
.op-cashier-main-panel,
.op-cashier-recent-panel-v3 article {
min-width: 0;
}
.op-cashier-section-head-v3 {
margin-bottom: 10px;
padding: 14px 16px;
border: 1px solid rgba(20,33,61,.07);
box-shadow: 0 14px 30px rgba(94,60,26,.055);
}
.op-cashier-section-head-v3 h2 {
margin: 0;
font-size: clamp(1.25rem, 2.8vw, 1.85rem);
font-weight: 690;
letter-spacing: -.025em;
}
.op-cashier-order-feed {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(355px, 1fr));
gap: 14px;
}
.op-cashier-order-card-v3 {
min-width: 0;
display: grid;
gap: 12px;
padding: 16px;
border-radius: 26px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 18px 42px rgba(94,60,26,.075);
}
.op-cashier-order-card-v3.channel-table { border-top: 4px solid rgba(180,35,24,.72); }
.op-cashier-order-card-v3.channel-takeaway { border-top: 4px solid rgba(255,107,0,.82); }
.op-cashier-order-card-v3.channel-pickup { border-top: 4px solid rgba(18,128,92,.75); }
.op-cashier-order-card-v3.channel-delivery { border-top: 4px solid rgba(6,87,184,.82); }
.op-cashier-order-card-v3.is-paid { border-color: rgba(18,128,92,.18); }
.op-cashier-order-card-head-v3 {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.op-cashier-order-card-head-v3 > div {
min-width: 0;
}
.op-cashier-order-card-head-v3 h2 {
margin: 7px 0 2px;
color: var(--op-text);
font-size: clamp(1.2rem, 2.5vw, 1.65rem);
line-height: 1.04;
font-weight: 720;
letter-spacing: -.028em;
overflow-wrap: anywhere;
}
.op-cashier-order-card-head-v3 p,
.op-cashier-order-card-head-v3 small {
display: block;
margin: 0;
color: var(--op-muted);
font-size: .82rem;
font-weight: 500;
line-height: 1.3;
overflow-wrap: anywhere;
}
.op-channel-pill-v3 {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 6px 10px;
border-radius: 999px;
color: var(--op-text);
background: rgba(6,37,91,.06);
font-size: .76rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: .045em;
font-weight: 720;
}
.op-channel-pill-v3.is-table { background: rgba(180,35,24,.09); color: #8e1710; }
.op-channel-pill-v3.is-takeaway { background: rgba(255,107,0,.11); color: #9b4d00; }
.op-channel-pill-v3.is-pickup { background: rgba(18,128,92,.10); color: #12684e; }
.op-channel-pill-v3.is-delivery { background: rgba(6,87,184,.10); color: #064f9b; }
.op-cashier-balance-box-v3 {
flex: 0 0 auto;
min-width: 105px;
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: 17px;
text-align: right;
background: rgba(20,33,61,.045);
border: 1px solid rgba(20,33,61,.06);
}
.op-cashier-balance-box-v3 span,
.op-cashier-card-totals-v3 span {
color: var(--op-muted);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .055em;
font-weight: 650;
}
.op-cashier-balance-box-v3 strong {
color: var(--op-text);
font-size: 1.18rem;
line-height: 1;
font-weight: 760;
}
.op-cashier-card-totals-v3 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-cashier-card-totals-v3 article {
min-width: 0;
padding: 9px 11px;
border-radius: 15px;
background: rgba(6,37,91,.04);
border: 1px solid rgba(20,33,61,.055);
}
.op-cashier-card-totals-v3 strong {
display: block;
margin-top: 3px;
color: var(--op-text);
font-size: .96rem;
font-weight: 700;
}
.op-cashier-item-summary-v3 {
display: grid;
gap: 7px;
padding: 10px;
border-radius: 18px;
background: rgba(246,248,252,.86);
border: 1px solid rgba(20,33,61,.06);
}
.op-cashier-item-line-v3 {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
padding: 8px 9px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(20,33,61,.05);
}
.op-cashier-item-line-v3 span {
min-width: 0;
display: grid;
gap: 3px;
}
.op-cashier-item-line-v3 strong {
color: var(--op-text);
font-size: .92rem;
line-height: 1.22;
font-weight: 685;
overflow-wrap: anywhere;
}
.op-cashier-item-line-v3 em,
.op-cashier-more-items-v3,
.op-cashier-no-items-v3 {
color: var(--op-muted);
font-size: .78rem;
line-height: 1.25;
font-style: normal;
font-weight: 530;
}
.op-cashier-item-line-v3 mark {
width: fit-content;
padding: 3px 7px;
border-radius: 999px;
color: #9a5a00;
background: rgba(255,178,67,.16);
font-size: .72rem;
font-weight: 650;
}
.op-cashier-item-line-v3 b {
color: var(--op-text);
font-size: .86rem;
font-weight: 720;
white-space: nowrap;
}
.op-cashier-more-items-v3,
.op-cashier-no-items-v3 {
margin: 0;
padding: 5px 3px 0;
}
.op-cashier-card-actions-v3 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-cashier-card-actions-v3 .op-btn,
.op-cashier-card-actions-v3 form,
.op-cashier-card-actions-v3 form .op-btn {
width: 100%;
min-width: 0;
}
.op-cashier-card-actions-v3 .op-btn {
min-height: 46px;
padding: 10px 12px;
border-radius: 15px;
font-size: .9rem;
white-space: normal;
}
.op-close-blockers-v3 {
gap: 6px;
margin-top: 0;
}
.op-payment-modal-v3 {
z-index: 125;
}
.op-payment-modal-card-v3 {
width: min(570px, 100%);
max-height: min(86vh, 760px);
overflow: auto;
padding: 22px;
border-radius: 28px;
}
.op-payment-modal-title-v3 {
margin: 0 0 12px;
padding-right: 30px;
}
.op-payment-modal-title-v3 h2 {
margin: 2px 0 2px;
font-size: clamp(1.45rem, 3vw, 2.1rem);
line-height: 1;
font-weight: 710;
letter-spacing: -.035em;
}
.op-payment-modal-title-v3 span {
color: var(--op-muted);
font-weight: 560;
}
.op-payment-form-modal-v3 {
padding: 0;
border: 0;
background: transparent;
}
.op-cashier-recent-panel-v3 {
position: sticky;
top: 14px;
}
.op-cashier-recent-panel-v3 article {
padding: 14px;
border-radius: 24px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 16px 38px rgba(94,60,26,.07);
}
.op-cashier-recent-head-v3 {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.op-cashier-recent-head-v3 h2 {
margin: 0;
font-size: 1.32rem;
font-weight: 690;
letter-spacing: -.02em;
}
.op-cashier-recent-head-v3 span {
min-width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: rgba(6,37,91,.07);
color: var(--op-muted);
font-size: .8rem;
font-weight: 720;
}
.op-payment-mini-list-v3 {
display: grid;
gap: 7px;
}
.op-payment-mini-list-v3 a,
.op-payment-mini-list-v3 p {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 8px;
padding: 10px 11px;
border-radius: 16px;
background: rgba(6,37,91,.04);
border: 1px solid rgba(20,33,61,.055);
}
.op-payment-mini-list-v3 a:hover {
border-color: rgba(6,87,184,.18);
background: rgba(6,87,184,.055);
}
.op-payment-mini-list-v3 strong {
color: var(--op-text);
font-size: .86rem;
font-weight: 720;
overflow-wrap: anywhere;
}
.op-payment-mini-list-v3 span {
grid-column: 1 / -1;
color: var(--op-muted);
font-size: .75rem;
font-weight: 530;
overflow-wrap: anywhere;
}
.op-payment-mini-list-v3 b {
color: var(--op-success);
font-size: .84rem;
font-weight: 760;
white-space: nowrap;
}
.op-print-preview-modal {
z-index: 130;
}
.op-print-preview-card {
width: min(560px, calc(100vw - 28px));
height: min(88vh, 860px);
padding: 16px;
border-radius: 28px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 12px;
}
.op-print-preview-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-right: 38px;
}
.op-print-preview-head h2 {
margin: 0;
font-size: 1.45rem;
font-weight: 705;
letter-spacing: -.025em;
}
.op-print-preview-card iframe {
width: 100%;
height: 100%;
border: 1px solid rgba(20,33,61,.08);
border-radius: 20px;
background: #fff;
}
@media (max-width: 1180px) {
.op-cashier-topbar,
.op-cashier-layout-v3 {
grid-template-columns: 1fr;
}
.op-cashier-topbar-right {
justify-content: stretch;
}
.op-cashier-total-due,
.op-cashier-topbar-right form,
.op-cashier-topbar-right button {
width: 100%;
}
.op-cashier-recent-panel-v3 {
position: static;
}
}
@media (max-width: 760px) {
.op-cashier-channel-strip,
.op-cashier-order-feed,
.op-cashier-card-actions-v3 {
grid-template-columns: 1fr;
}
.op-cashier-order-card-head-v3 {
flex-direction: column;
}
.op-cashier-balance-box-v3 {
width: 100%;
text-align: left;
}
.op-cashier-card-totals-v3,
.op-cashier-item-line-v3 {
grid-template-columns: 1fr;
}
}
/* PATCH 052 · Ajuste visual caja cabecera, cobros y modal de impresión */
.op-cashier-screen-v3 {
gap: 12px;
}
.op-cashier-topbar {
grid-template-columns: minmax(150px, .62fr) minmax(390px, 1.65fr) auto;
gap: 10px;
padding: 14px 16px;
}
.op-cashier-channel-strip {
gap: 7px;
}
.op-cashier-channel-strip a {
min-height: 44px;
padding: 8px 9px;
gap: 7px;
border-radius: 15px;
font-size: .88rem;
font-weight: 650;
}
.op-cashier-channel-icon {
width: 25px;
height: 25px;
display: inline-grid;
place-items: center;
border-radius: 9px;
color: #9d180f;
background: rgba(180,35,24,.085);
font-size: .95rem;
font-weight: 760;
line-height: 1;
}
.op-cashier-topbar-right {
gap: 7px;
}
.op-cashier-total-due,
.op-cashier-topbar-right form .op-btn {
min-width: 120px;
min-height: 44px;
border-radius: 15px;
}
.op-cashier-total-due {
align-content: center;
gap: 1px;
padding: 7px 10px;
}
.op-cashier-total-due span {
font-size: .66rem;
letter-spacing: .045em;
}
.op-cashier-total-due strong {
font-size: .93rem;
line-height: 1.08;
}
.op-cashier-topbar-right form .op-btn {
padding: 8px 12px;
font-size: .83rem;
}
.op-cashier-order-feed {
align-items: start;
}
.op-cashier-recent-panel-v3 article {
padding: 12px;
border-radius: 20px;
}
.op-cashier-recent-head-v3 {
margin-bottom: 7px;
}
.op-cashier-recent-head-v3 h2 {
font-size: 1.05rem;
line-height: 1.05;
font-weight: 690;
}
.op-cashier-recent-head-v3 span {
min-width: 26px;
height: 26px;
font-size: .72rem;
}
.op-payment-mini-list-v3 {
gap: 6px;
}
.op-payment-mini-list-v3 a,
.op-payment-mini-list-v3 p {
grid-template-columns: 1fr;
gap: 3px;
padding: 8px 9px;
border-radius: 13px;
}
.op-payment-mini-list-v3 strong {
font-size: .78rem;
line-height: 1.15;
}
.op-payment-mini-list-v3 span {
grid-column: auto;
font-size: .69rem;
line-height: 1.2;
}
.op-payment-mini-list-v3 b {
display: none;
}
.op-print-preview-head {
padding-right: 38px;
}
.op-print-preview-head .op-btn {
min-width: 92px;
min-height: 36px;
border-radius: 13px;
}
@media (max-width: 1180px) {
.op-cashier-topbar {
grid-template-columns: 1fr;
}
.op-cashier-channel-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.op-cashier-channel-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-cashier-topbar-right {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* PATCH 053 · Caja: canales prominentes, iconos explícitos y lectura de ítems */
.op-cashier-channel-strip a {
min-height: 46px;
gap: 9px;
font-size: .9rem;
}
.op-cashier-channel-icon {
width: 31px;
height: 31px;
border-radius: 11px;
font-size: 1.28rem;
font-weight: 760;
line-height: 1;
}
.op-cashier-channel-strip a.is-table .op-cashier-channel-icon {
background: rgba(180,35,24,.12);
color: #9d180f;
}
.op-cashier-channel-strip a.is-takeaway .op-cashier-channel-icon {
background: rgba(255,107,0,.13);
color: #9b4d00;
}
.op-cashier-channel-strip a.is-pickup .op-cashier-channel-icon {
background: rgba(18,128,92,.12);
color: #12684e;
}
.op-cashier-channel-strip a.is-delivery .op-cashier-channel-icon {
background: rgba(6,87,184,.12);
color: #064f9b;
}
.op-channel-pill-v3 {
min-height: 34px;
gap: 7px;
padding: 7px 12px;
border-radius: 999px;
font-size: .84rem;
letter-spacing: .035em;
border: 1px solid rgba(20,33,61,.06);
box-shadow: 0 7px 15px rgba(20,33,61,.045);
}
.op-channel-pill-icon {
display: inline-grid;
place-items: center;
font-size: 1.08rem;
line-height: 1;
}
.op-channel-pill-v3.is-table {
background: rgba(180,35,24,.12);
border-color: rgba(180,35,24,.14);
color: #8e1710;
}
.op-channel-pill-v3.is-takeaway {
background: rgba(255,107,0,.14);
border-color: rgba(255,107,0,.16);
color: #8f4600;
}
.op-channel-pill-v3.is-pickup {
background: rgba(18,128,92,.13);
border-color: rgba(18,128,92,.15);
color: #12684e;
}
.op-channel-pill-v3.is-delivery {
background: rgba(6,87,184,.14);
border-color: rgba(6,87,184,.16);
color: #064f9b;
}
.op-cashier-item-line-v3 strong,
.op-cashier-item-line-v3 em {
color: var(--op-text);
font-weight: 685;
}
.op-cashier-item-line-v3 em {
font-size: .86rem;
line-height: 1.22;
}
@media (max-width: 760px) {
.op-cashier-channel-icon {
width: 29px;
height: 29px;
font-size: 1.15rem;
}
.op-channel-pill-v3 {
min-height: 32px;
font-size: .8rem;
}
}
/* PATCH 055 — Caja: creación de pedidos por canal en modal */
.op-create-order-modal { z-index: 90; }
.op-create-order-modal .op-modal-backdrop { background: rgba(8, 14, 28, .50); backdrop-filter: blur(9px); }
.op-create-order-modal-card {
width: min(780px, calc(100vw - 30px));
max-height: calc(100vh - 34px);
overflow: auto;
padding: 18px;
border-radius: 28px;
border: 1px solid rgba(15, 23, 42, .08);
background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.98));
box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
}
.op-create-order-modal-card .op-modal-close {
top: 16px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(15, 23, 42, .06);
color: var(--op-muted);
font-size: 24px;
line-height: 1;
}
.op-create-order-modal-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: center;
margin-bottom: 14px;
padding: 14px 48px 14px 14px;
border-radius: 22px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(15, 23, 42, .07);
}
.op-create-order-modal-head > span {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 18px;
font-size: 26px;
}
.op-create-order-modal-head.is-takeaway > span { background: rgba(255,107,0,.12); }
.op-create-order-modal-head.is-pickup > span { background: rgba(18,128,92,.12); }
.op-create-order-modal-head.is-delivery > span { background: rgba(6,87,184,.12); }
.op-create-order-modal-head .op-kicker { margin: 0 0 3px; }
.op-create-order-modal-head h2 {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.9rem);
letter-spacing: -.04em;
color: var(--op-text);
}
.op-create-order-modal-head small {
display: block;
margin-top: 4px;
color: var(--op-muted);
font-weight: 650;
line-height: 1.35;
}
.op-create-order-form {
display: grid;
gap: 12px;
padding: 0;
}
.op-create-order-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.op-create-order-form label {
display: grid;
gap: 7px;
margin: 0;
color: var(--op-muted);
font-weight: 760;
font-size: .78rem;
}
.op-create-order-form input,
.op-create-order-form select {
width: 100%;
min-height: 48px;
border-radius: 16px;
border: 1px solid rgba(100, 116, 139, .24);
background: #fff;
color: var(--op-text);
padding: 10px 13px;
font-size: .96rem;
font-weight: 680;
outline: none;
}
.op-create-order-form input:focus,
.op-create-order-form select:focus {
border-color: rgba(180,35,24,.42);
box-shadow: 0 0 0 4px rgba(180,35,24,.08);
}
.op-create-order-field-wide { display: grid; }
.op-create-order-field-wide small {
color: var(--op-muted);
font-weight: 600;
line-height: 1.35;
}
.op-form-error-box {
display: grid;
gap: 6px;
margin: 0 0 12px;
padding: 11px 13px;
border-radius: 18px;
background: rgba(180,35,24,.08);
border: 1px solid rgba(180,35,24,.18);
color: #9f1239;
font-size: .85rem;
font-weight: 760;
}
.op-form-error-box span { display: block; }
@media (max-width: 720px) {
.op-create-order-modal-card { padding: 14px; border-radius: 24px; }
.op-create-order-modal-head { padding-right: 44px; }
.op-create-order-grid { grid-template-columns: 1fr; }
}
/* PATCH 056 · Caja canal: comanda visual para delivery / llevar / recojo */
.op-channel-comanda-screen {
--op-channel-accent: var(--op-primary);
--op-channel-accent-soft: rgba(6, 37, 91, .10);
}
.op-channel-comanda-delivery {
--op-channel-accent: #1d4ed8;
--op-channel-accent-soft: rgba(29, 78, 216, .10);
}
.op-channel-comanda-takeaway {
--op-channel-accent: #b91c1c;
--op-channel-accent-soft: rgba(185, 28, 28, .10);
}
.op-channel-comanda-pickup {
--op-channel-accent: #12805c;
--op-channel-accent-soft: rgba(18, 128, 92, .10);
}
.op-channel-comanda-hero {
background:
linear-gradient(135deg, color-mix(in srgb, var(--op-channel-accent) 96%, #07152b), color-mix(in srgb, var(--op-channel-accent) 74%, #0f172a)),
var(--op-channel-accent);
}
.op-channel-comanda-hero .op-comanda-check {
background: rgba(255,255,255,.16);
font-size: 1.45rem;
}
.op-channel-comanda-hero-side {
display: flex;
align-items: center;
gap: 12px;
min-width: min(560px, 52vw);
justify-content: flex-end;
}
.op-channel-comanda-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.op-channel-comanda-actions .op-btn {
min-height: 48px;
padding-inline: 16px;
border-radius: 16px;
}
.op-channel-info-strip .op-info-icon {
background: var(--op-channel-accent-soft);
color: var(--op-channel-accent);
}
.op-channel-comanda-layout {
grid-template-columns: minmax(0, 1fr) minmax(350px, 450px);
}
.op-channel-order-summary {
border-top: 5px solid var(--op-channel-accent);
}
.op-channel-client-card,
.op-channel-order-summary .op-comanda-order-card,
.op-channel-send-card {
display: grid;
gap: 9px;
padding: 14px;
border-radius: 20px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 12px 28px rgba(20,33,61,.06);
}
.op-channel-client-card {
background: linear-gradient(135deg, #f8fafc, color-mix(in srgb, var(--op-channel-accent-soft) 75%, #fff));
}
.op-channel-client-card strong,
.op-channel-client-card span,
.op-channel-client-card small,
.op-channel-client-card em {
display: block;
}
.op-channel-client-card strong {
color: var(--op-text);
font-size: 1.02rem;
line-height: 1.15;
}
.op-channel-client-card small {
color: var(--op-channel-accent);
font-weight: 850;
text-transform: uppercase;
letter-spacing: .05em;
font-size: .72rem;
}
.op-channel-client-card span,
.op-channel-client-card em {
color: var(--op-muted);
font-size: .86rem;
font-weight: 720;
font-style: normal;
line-height: 1.25;
}
.op-channel-order-summary .op-comanda-card-head,
.op-channel-current-order-card .op-comanda-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.op-channel-order-summary .op-comanda-card-head span {
color: var(--op-muted);
font-size: .74rem;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 850;
}
.op-channel-order-summary .op-comanda-card-head strong {
color: var(--op-text);
font-weight: 850;
}
.op-channel-current-lines .op-channel-ticket-line {
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: start;
padding: 10px;
border-radius: 16px;
background: #fff;
border-color: rgba(20,33,61,.07);
}
.op-channel-current-lines .op-ticket-line-main {
min-width: 0;
}
.op-channel-current-lines .op-ticket-line-main strong {
display: block;
color: var(--op-text);
font-weight: 900;
line-height: 1.14;
}
.op-channel-current-lines .op-order-item-detail {
color: rgba(20, 33, 61, .72);
font-size: .82rem;
font-weight: 850;
}
.op-channel-current-lines .op-line-qty {
background: var(--op-channel-accent);
}
.op-channel-send-card {
background: var(--op-channel-accent-soft);
}
.op-channel-send-card .op-send-kitchen-button {
background: var(--op-channel-accent);
box-shadow: 0 16px 30px color-mix(in srgb, var(--op-channel-accent) 26%, transparent);
}
@media (max-width: 1180px) {
.op-channel-comanda-hero-side {
min-width: 0;
width: 100%;
justify-content: space-between;
}
.op-channel-comanda-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.op-channel-comanda-hero-side {
align-items: stretch;
flex-direction: column;
}
.op-channel-comanda-actions {
justify-content: stretch;
}
.op-channel-comanda-actions .op-btn,
.op-channel-comanda-actions form,
.op-channel-comanda-actions form button {
flex: 1 1 auto;
}
.op-channel-current-lines .op-channel-ticket-line {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.op-channel-current-lines .op-channel-ticket-line form {
grid-column: 1 / -1;
justify-self: end;
}
}
/* PATCH 059 · Caja: cliente rápido por teléfono */
.op-create-order-lookup-block {
display: grid;
grid-template-columns: minmax(190px, .9fr) minmax(0, 1.1fr);
gap: 12px;
align-items: stretch;
}
.op-create-order-phone-field input {
min-height: 54px;
font-size: 1.08rem;
letter-spacing: .02em;
}
.op-create-order-phone-field small {
color: var(--op-muted, #667085);
font-size: .72rem;
font-weight: 650;
line-height: 1.25;
}
.op-customer-lookup-panel {
min-height: 92px;
display: grid;
align-content: center;
gap: 8px;
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(100,116,139,.16);
background: rgba(248,250,252,.96);
color: var(--op-muted, #667085);
font-size: .82rem;
font-weight: 720;
line-height: 1.3;
}
.op-customer-lookup-panel.is-found {
background: rgba(18,128,92,.08);
border-color: rgba(18,128,92,.18);
color: #075e45;
}
.op-customer-lookup-panel.is-new {
background: rgba(180,35,24,.06);
border-color: rgba(180,35,24,.14);
color: #9f1239;
}
.op-customer-lookup-panel.is-loading,
.op-customer-lookup-panel.is-idle {
background: rgba(6,37,91,.045);
border-color: rgba(6,37,91,.12);
color: var(--op-muted, #667085);
}
.op-customer-lookup-panel.is-blocked {
background: rgba(180,35,24,.10);
border-color: rgba(180,35,24,.22);
color: #991b1b;
}
.op-customer-found-head {
display: grid;
gap: 2px;
}
.op-customer-found-head strong {
color: var(--op-text, #14213d);
font-size: .95rem;
font-weight: 850;
letter-spacing: -.01em;
}
.op-customer-found-head span {
font-size: .75rem;
font-weight: 700;
color: inherit;
}
.op-customer-address-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.op-customer-address-option {
appearance: none;
border: 1px solid rgba(18,128,92,.22);
background: rgba(255,255,255,.88);
color: var(--op-text, #14213d);
border-radius: 14px;
padding: 8px 10px;
display: grid;
gap: 2px;
text-align: left;
cursor: pointer;
max-width: 100%;
box-shadow: 0 8px 18px rgba(6,37,91,.06);
}
.op-customer-address-option:hover,
.op-customer-address-option:focus-visible {
border-color: rgba(18,128,92,.42);
background: #fff;
outline: none;
}
.op-customer-address-option strong {
font-size: .78rem;
font-weight: 830;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.op-customer-address-option span {
color: var(--op-muted, #667085);
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 720px) {
.op-create-order-lookup-block {
grid-template-columns: 1fr;
}
}
/* PATCH 060 · Directorio de clientes por sucursal */
.op-branch-customers-page {
display: grid;
gap: 14px;
}
.op-branch-customers-head {
align-items: flex-start;
}
.op-customer-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.op-customer-stats-grid > article {
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
background: rgba(255, 255, 255, .92);
padding: 12px 14px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.op-customer-stats-grid span {
display: block;
color: var(--op-muted);
font-size: .74rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.op-customer-stats-grid strong {
display: block;
color: var(--op-text);
font-size: 1.3rem;
line-height: 1.1;
margin-top: 4px;
}
.op-customer-filter-card {
padding: 12px;
}
.op-customer-filter-form {
display: grid;
grid-template-columns: minmax(220px, 1fr) 180px auto auto;
gap: 10px;
align-items: end;
}
.op-customer-filter-form label {
display: grid;
gap: 5px;
color: var(--op-muted);
font-size: .78rem;
}
.op-customer-directory-list {
display: grid;
gap: 10px;
}
.op-customer-directory-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 20px;
background: rgba(255, 255, 255, .96);
box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}
.op-customer-directory-main {
display: grid;
gap: 3px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.op-customer-directory-main:focus-visible {
outline: 2px solid rgba(247, 44, 8, .28);
outline-offset: 4px;
border-radius: 14px;
}
.op-customer-phone {
color: var(--op-accent);
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
}
.op-customer-directory-main strong {
color: var(--op-text);
font-size: 1rem;
line-height: 1.15;
}
.op-customer-directory-main small {
color: var(--op-muted);
font-size: .78rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-customer-directory-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
flex-wrap: wrap;
color: var(--op-muted);
font-size: .76rem;
}
.op-customer-directory-actions {
display: flex;
justify-content: flex-end;
}
.op-customer-detail-card {
width: min(1020px, calc(100vw - 28px));
max-height: min(88vh, 820px);
overflow: auto;
}
.op-customer-detail-grid {
display: grid;
grid-template-columns: minmax(260px, .95fr) minmax(280px, 1.05fr);
gap: 12px;
margin-top: 14px;
}
.op-customer-detail-panel {
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
background: rgba(248, 250, 252, .86);
padding: 12px;
}
.op-customer-detail-panel-wide {
grid-column: 1 / -1;
}
.op-customer-detail-panel h3 {
margin: 0 0 10px;
color: var(--op-text);
font-size: .95rem;
font-weight: 700;
}
.op-customer-edit-form {
margin-top: 10px;
}
.op-customer-checks {
display: flex;
gap: 10px;
flex-wrap: wrap;
color: var(--op-muted);
font-size: .82rem;
}
.op-customer-checks label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 999px;
background: #fff;
}
.op-customer-address-admin-list,
.op-customer-orders-admin-list {
display: grid;
gap: 8px;
}
.op-customer-address-admin-list article,
.op-customer-orders-admin-list a {
display: grid;
gap: 3px;
padding: 10px;
border: 1px solid rgba(15, 23, 42, .07);
border-radius: 14px;
background: #fff;
color: inherit;
text-decoration: none;
}
.op-customer-address-admin-list strong,
.op-customer-orders-admin-list strong {
color: var(--op-text);
font-size: .86rem;
}
.op-customer-address-admin-list span,
.op-customer-orders-admin-list span {
color: var(--op-muted);
font-size: .8rem;
}
.op-customer-address-admin-list small,
.op-customer-orders-admin-list small {
color: var(--op-muted);
font-size: .74rem;
}
.op-customer-orders-admin-list a:hover,
.op-customer-orders-admin-list a:focus-visible {
border-color: rgba(247, 44, 8, .22);
box-shadow: 0 12px 26px rgba(247, 44, 8, .08);
}
@media (max-width: 860px) {
.op-customer-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-customer-filter-form,
.op-customer-directory-card,
.op-customer-detail-grid {
grid-template-columns: 1fr;
}
.op-customer-directory-meta,
.op-customer-directory-actions {
justify-content: flex-start;
}
}
.op-section-head-compact {
gap: 8px;
margin-bottom: 8px;
}
.op-section-head-compact h3,
.op-section-head-compact .op-kicker {
margin-bottom: 0;
}
/* PATCH 062 · Administración local: cabecera fija, perfil y dashboard limpio */
.op-branch-topbar-admin {
position: sticky;
top: 0;
z-index: 45;
min-height: 70px;
gap: 16px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(16px);
box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.op-branch-topbar-main {
display: flex;
align-items: center;
gap: 14px;
min-width: 220px;
}
.op-branch-brand-admin span {
display: grid;
gap: 1px;
line-height: 1.08;
}
.op-branch-brand-admin strong {
color: var(--op-text);
font-size: .96rem;
font-weight: 780;
white-space: nowrap;
}
.op-branch-brand-admin small {
color: var(--op-muted);
font-size: .72rem;
font-weight: 760;
text-transform: uppercase;
letter-spacing: .06em;
}
.op-branch-nav-admin {
flex: 1 1 auto;
justify-content: center;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.op-branch-nav-admin::-webkit-scrollbar { display: none; }
.op-branch-nav-admin a {
white-space: nowrap;
padding: 11px 13px;
}
.op-branch-user-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.op-branch-user-actions form { margin: 0; }
.op-branch-user-mini {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 6px 10px 6px 6px;
border: 1px solid rgba(15, 23, 42, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .86);
color: var(--op-text);
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.op-branch-user-mini:hover,
.op-branch-user-mini.active {
background: rgba(6, 37, 91, .06);
border-color: rgba(6, 37, 91, .18);
transform: translateY(-1px);
}
.op-branch-user-mini span:last-child {
display: grid;
gap: 0;
line-height: 1.06;
}
.op-branch-user-mini strong {
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .84rem;
font-weight: 780;
}
.op-branch-user-mini small {
color: var(--op-muted);
font-size: .68rem;
font-weight: 780;
text-transform: uppercase;
letter-spacing: .05em;
}
.op-branch-avatar-sm {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(6, 37, 91, .10);
color: var(--op-primary);
font-size: .9rem;
font-weight: 820;
overflow: hidden;
}
.op-branch-avatar-sm img {
width: 100%;
height: 100%;
object-fit: cover;
}
.op-branch-logout {
min-height: 42px;
padding: 10px 15px;
border-radius: 14px;
}
.op-branch-menu-toggle {
display: none;
align-items: center;
gap: 4px;
min-height: 42px;
padding: 9px 12px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, .12);
background: #fff;
color: var(--op-text);
font-weight: 780;
}
.op-branch-menu-toggle span {
display: block;
width: 16px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.op-branch-menu-toggle b {
margin-left: 5px;
font-size: .78rem;
}
.op-branch-admin-content {
padding-top: 28px;
}
.op-branch-home-hero {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
gap: 18px;
}
.op-branch-user-card {
display: flex;
align-items: center;
gap: clamp(18px, 3vw, 28px);
}
.op-branch-user-avatar,
.op-branch-profile-avatar {
flex: 0 0 auto;
width: 106px;
height: 106px;
display: grid;
place-items: center;
border-radius: 32px;
background: linear-gradient(135deg, rgba(6,37,91,.12), rgba(255,107,0,.10));
color: var(--op-primary);
font-size: 2.6rem;
font-weight: 820;
overflow: hidden;
border: 1px solid rgba(15,23,42,.08);
}
.op-branch-user-avatar img,
.op-branch-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.op-branch-user-info h1,
.op-branch-profile-head h1 {
margin: 3px 0 4px;
font-size: clamp(1.7rem, 3vw, 2.6rem);
line-height: .95;
letter-spacing: -.04em;
}
.op-branch-user-info p:not(.op-kicker) {
margin: 0;
color: var(--op-muted);
line-height: 1.45;
}
.op-branch-user-actions-card {
margin-top: 16px;
}
.op-branch-user-actions-card form { margin: 0; }
.op-branch-operation-card {
display: grid;
align-content: center;
gap: 10px;
}
.op-branch-operation-card h2 {
margin: 0;
font-size: clamp(1.25rem, 2vw, 1.75rem);
}
.op-branch-operation-card p:not(.op-kicker) {
margin: 0;
line-height: 1.5;
}
.op-branch-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.op-branch-quick-actions a {
min-height: 34px;
display: inline-flex;
align-items: center;
padding: 7px 11px;
border-radius: 999px;
background: rgba(6, 37, 91, .07);
color: var(--op-primary);
font-size: .78rem;
font-weight: 800;
}
.op-branch-metric-card h1 {
margin: 10px 0 4px;
font-size: clamp(1.9rem, 4vw, 2.7rem);
line-height: .9;
}
.op-branch-metric-card p {
margin: 10px 0 0;
min-height: 42px;
}
.op-branch-summary-grid article {
box-shadow: none;
}
.op-branch-profile-page {
display: grid;
gap: 18px;
}
.op-branch-profile-head {
margin-bottom: 0;
}
.op-branch-profile-grid {
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.op-branch-profile-summary {
display: grid;
justify-items: center;
text-align: center;
gap: 12px;
}
.op-branch-profile-summary h2 {
margin: 2px 0 0;
}
.op-branch-profile-summary p {
margin: 0;
}
.op-branch-profile-branches {
justify-content: center;
}
.op-branch-profile-meta {
width: 100%;
display: grid;
gap: 6px;
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, .08);
text-align: left;
}
.op-branch-profile-meta span {
color: var(--op-muted);
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.op-branch-profile-meta strong {
color: var(--op-text);
font-size: .94rem;
overflow-wrap: anywhere;
}
.op-branch-profile-forms {
display: grid;
gap: 18px;
}
.op-branch-profile-form input[type="file"] {
padding: 12px;
min-height: 54px;
background: rgba(6, 37, 91, .035);
}
.op-branch-profile-actions {
position: static;
justify-content: flex-end;
padding-top: 6px;
}
@media (max-width: 1180px) {
.op-branch-topbar-admin {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.op-branch-topbar-main {
min-width: 0;
justify-content: space-between;
}
.op-branch-menu-toggle { display: inline-flex; }
.op-branch-nav-admin {
grid-column: 1 / -1;
display: none;
width: 100%;
justify-content: flex-start;
padding-top: 8px;
border-top: 1px solid rgba(15, 23, 42, .08);
}
.op-branch-nav-admin.is-open {
display: flex;
flex-wrap: wrap;
}
}
@media (max-width: 980px) {
.op-branch-home-hero,
.op-branch-profile-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.op-branch-topbar-admin {
position: sticky;
padding: 12px 14px;
gap: 10px;
}
.op-branch-user-actions {
grid-column: 1 / -1;
width: 100%;
justify-content: space-between;
}
.op-branch-user-mini {
flex: 1 1 auto;
justify-content: flex-start;
}
.op-branch-user-mini strong {
max-width: 180px;
}
.op-branch-user-card {
align-items: flex-start;
flex-direction: column;
}
.op-branch-user-avatar,
.op-branch-profile-avatar {
width: 88px;
height: 88px;
border-radius: 28px;
font-size: 2rem;
}
}
/* PATCH 063 · Administración local: topbar de marca, menú compacto con iconos y barra desarrollador */
.op-branch-frame {
padding-bottom: 30px;
}
.op-branch-topbar-admin {
background: var(--op-primary);
background: linear-gradient(135deg, var(--op-primary), color-mix(in srgb, var(--op-primary) 88%, #000 12%));
border-bottom: 0;
color: #fff;
box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
}
.op-branch-brand-admin {
color: #fff;
}
.op-branch-brand-admin .op-admin-brand-mark {
width: 40px;
height: 40px;
padding: 7px;
border-radius: 14px;
background: #fff;
box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
object-fit: contain;
}
.op-branch-brand-admin strong,
.op-branch-brand-admin small {
color: #fff;
}
.op-branch-brand-admin small {
opacity: .78;
}
.op-branch-menu-toggle {
border-color: rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .12);
color: #fff;
}
.op-branch-menu-toggle:hover,
.op-branch-menu-toggle.is-open {
background: rgba(255, 255, 255, .20);
}
.op-branch-nav-admin {
gap: 7px;
}
.op-branch-nav-admin a {
min-width: 46px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 7px 8px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .90);
transition: width .18s ease, min-width .18s ease, background .14s ease, border-color .14s ease, transform .14s ease, color .14s ease;
}
.op-branch-nav-admin a:hover,
.op-branch-nav-admin a:focus-visible,
.op-branch-nav-admin a.active {
background: rgba(255, 255, 255, .96);
border-color: rgba(255, 255, 255, .98);
color: var(--op-primary);
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}
.op-nav-ico {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: inline-grid;
place-items: center;
border-radius: 11px;
color: #fff;
font-size: 1rem;
font-weight: 900;
line-height: 1;
box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .14), 0 8px 16px rgba(15, 23, 42, .15);
}
.op-nav-ico-home { background: linear-gradient(135deg, #ff8a00, #f72c08); }
.op-nav-ico-stations { background: linear-gradient(135deg, #6366f1, #2563eb); }
.op-nav-ico-cash { background: linear-gradient(135deg, #16a34a, #047857); }
.op-nav-ico-tables { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.op-nav-ico-delivery { background: linear-gradient(135deg, #ef4444, #a40000); }
.op-nav-ico-customers { background: linear-gradient(135deg, #f59e0b, #d97706); }
.op-nav-ico-inventory { background: linear-gradient(135deg, #10b981, #0f766e); }
.op-nav-ico-purchases { background: linear-gradient(135deg, #ec4899, #be185d); }
.op-nav-ico-transfers { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.op-nav-ico-exceptions { background: linear-gradient(135deg, #f97316, #b42318); }
.op-nav-ico-reports { background: linear-gradient(135deg, #64748b, #334155); }
.op-nav-ico-admin { background: linear-gradient(135deg, #111827, #4b5563); }
.op-branch-nav-label {
display: inline-block;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
color: currentColor;
font-size: .83rem;
font-weight: 850;
letter-spacing: -.01em;
transition: max-width .18s ease, opacity .12s ease, margin-left .18s ease;
}
.op-branch-nav-admin a:hover .op-branch-nav-label,
.op-branch-nav-admin a:focus-visible .op-branch-nav-label,
.op-branch-nav-admin a.active .op-branch-nav-label {
max-width: 128px;
margin-left: 7px;
opacity: 1;
}
.op-branch-user-mini {
border-color: rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .10);
color: #fff;
}
.op-branch-user-mini:hover,
.op-branch-user-mini.active {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .28);
}
.op-branch-user-mini strong,
.op-branch-user-mini small {
color: #fff;
}
.op-branch-user-mini small {
opacity: .72;
}
.op-branch-avatar-sm {
background: rgba(255, 255, 255, .94);
color: var(--op-primary);
}
.op-branch-logout {
border-color: rgba(255, 255, 255, .22) !important;
background: rgba(255, 255, 255, .10) !important;
color: #fff !important;
}
.op-branch-logout:hover {
background: rgba(255, 255, 255, .20) !important;
transform: translateY(-1px);
}
.op-branch-devbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
min-height: 26px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 12px;
background: var(--op-secondary);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .01em;
box-shadow: 0 -10px 24px rgba(15, 23, 42, .10);
}
.op-branch-devbar span {
opacity: .78;
}
.op-branch-devbar a {
color: #fff;
font-weight: 900;
text-decoration: none;
}
.op-branch-devbar a:hover,
.op-branch-devbar a:focus-visible {
text-decoration: underline;
}
@media (max-width: 1180px) {
.op-branch-topbar-admin {
background: var(--op-primary);
}
.op-branch-nav-admin {
border-top-color: rgba(255, 255, 255, .14);
}
.op-branch-nav-admin.is-open {
gap: 8px;
}
.op-branch-nav-admin a {
min-width: 0;
justify-content: flex-start;
padding: 8px 12px 8px 8px;
}
.op-branch-nav-label,
.op-branch-nav-admin a:hover .op-branch-nav-label,
.op-branch-nav-admin a:focus-visible .op-branch-nav-label,
.op-branch-nav-admin a.active .op-branch-nav-label {
max-width: 160px;
margin-left: 7px;
opacity: 1;
}
}
@media (max-width: 720px) {
.op-branch-frame {
padding-bottom: 34px;
}
.op-branch-topbar-admin {
box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
}
.op-branch-devbar {
font-size: .68rem;
min-height: 28px;
}
}
/* PATCH 064 · Admin local: inicio sin tarjeta de usuario y salida como icono */
.op-branch-home-hero-clean {
grid-template-columns: minmax(0, 1fr);
}
.op-branch-operation-card-wide {
min-height: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-block: 22px;
}
.op-branch-operation-card-wide h2 {
margin: 0 0 6px;
}
.op-branch-operation-card-wide p:not(.op-kicker) {
max-width: 680px;
}
.op-branch-operation-card-wide .op-branch-quick-actions {
margin-top: 0;
justify-content: flex-end;
flex: 0 0 auto;
}
.op-branch-logout {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
display: inline-grid;
place-items: center;
padding: 0 !important;
border-radius: 999px;
}
.op-branch-logout svg {
width: 21px;
height: 21px;
display: block;
}
@media (max-width: 860px) {
.op-branch-operation-card-wide {
align-items: flex-start;
flex-direction: column;
}
.op-branch-operation-card-wide .op-branch-quick-actions {
justify-content: flex-start;
}
}
/* PATCH 065 · PINs operativos administrados por sucursal */
.op-nav-ico-pins { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.op-branch-pins-page {
display: grid;
gap: 14px;
}
.op-branch-pins-head {
align-items: flex-start;
}
.op-pin-reveal-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
border: 1px solid rgba(18, 128, 92, .22);
background: linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(255, 255, 255, .96));
box-shadow: 0 18px 40px rgba(18, 128, 92, .12);
}
.op-pin-reveal-card h3 {
margin: 0;
color: var(--op-text);
font-size: 1.25rem;
}
.op-pin-reveal-card p {
margin: 4px 0;
color: var(--op-muted);
}
.op-pin-reveal-card small {
color: var(--op-success);
font-weight: 750;
}
.op-pin-reveal-code {
min-width: 138px;
text-align: center;
padding: 18px 22px;
border-radius: 22px;
background: #101418;
color: #fff;
font-size: 2.35rem;
letter-spacing: .20em;
line-height: 1;
box-shadow: 0 16px 28px rgba(16, 20, 24, .18);
}
.op-pins-stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.op-pins-stats-grid > article {
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
background: rgba(255, 255, 255, .92);
padding: 12px 14px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.op-pins-stats-grid span {
display: block;
color: var(--op-muted);
font-size: .74rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.op-pins-stats-grid strong {
display: block;
margin-top: 4px;
color: var(--op-text);
font-size: 1.3rem;
line-height: 1.1;
}
.op-pin-rules-card {
padding: 14px 16px;
}
.op-pin-rules-card h3 {
margin: 0 0 4px;
color: var(--op-text);
font-size: 1rem;
}
.op-pin-rules-card p {
margin: 0;
color: var(--op-muted);
line-height: 1.45;
}
.op-operator-pin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.op-operator-pin-card {
display: grid;
gap: 12px;
border: 1px solid rgba(15, 23, 42, .08);
border-top: 4px solid rgba(15, 23, 42, .14);
border-radius: 24px;
background: rgba(255, 255, 255, .94);
padding: 14px;
box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}
.op-operator-pin-card-waiter { border-top-color: #2563eb; }
.op-operator-pin-card-kitchen { border-top-color: #16a34a; }
.op-operator-pin-card-cashier { border-top-color: #a40000; }
.op-operator-pin-card-delivery { border-top-color: #f97316; }
.op-operator-pin-card header {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.op-operator-role-badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
color: #fff;
font-size: .74rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .14);
}
.op-operator-role-waiter { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.op-operator-role-kitchen { background: linear-gradient(135deg, #22c55e, #15803d); }
.op-operator-role-cashier { background: linear-gradient(135deg, #ef4444, #a40000); }
.op-operator-role-delivery { background: linear-gradient(135deg, #fb923c, #c2410c); }
.op-operator-pin-main {
display: grid;
gap: 2px;
}
.op-operator-pin-main strong {
color: var(--op-text);
font-size: 1.18rem;
line-height: 1.15;
}
.op-operator-pin-main small,
.op-operator-pin-meta {
color: var(--op-muted);
}
.op-operator-pin-meta {
display: grid;
gap: 4px;
padding: 10px;
border-radius: 16px;
background: rgba(243, 246, 251, .92);
font-size: .82rem;
}
.op-operator-pin-meta b {
color: var(--op-text);
}
.op-pin-regenerate-modal textarea {
resize: vertical;
}
.op-warning-note {
border: 1px solid rgba(183, 121, 31, .18);
border-radius: 16px;
background: rgba(255, 247, 237, .95);
color: #9a5b00;
padding: 10px 12px;
font-size: .86rem;
font-weight: 650;
line-height: 1.35;
}
@media (max-width: 720px) {
.op-pin-reveal-card,
.op-pins-stats-grid {
grid-template-columns: 1fr;
}
.op-pin-reveal-code {
width: 100%;
}
}
/* PATCH 066 - Estaciones admin compactas + código irrepetible */
.op-stations-admin-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(330px, .75fr);
gap: clamp(16px, 2vw, 22px);
align-items: start;
}
.op-section-head-tight {
margin-bottom: 14px;
}
.op-stations-generate-card,
.op-stations-state-card,
.op-station-history-card {
border-radius: 24px;
}
.op-station-code-form-compact {
display: grid;
gap: 14px;
}
.op-station-code-form-compact label {
margin: 0;
}
.op-station-picker {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 10px;
}
.op-station-choice {
cursor: pointer;
min-width: 0;
}
.op-station-choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.op-station-choice-inner {
min-height: 94px;
border: 1px solid rgba(6, 37, 91, .12);
border-radius: 20px;
background: rgba(255,255,255,.82);
display: grid;
place-items: center;
gap: 8px;
padding: 12px 10px;
text-align: center;
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.op-station-choice-inner b,
.op-station-state-item b,
.op-station-turn-copy strong {
font-weight: 850;
color: var(--op-text);
}
.op-station-choice-inner small,
.op-station-state-item small,
.op-station-turn-copy span {
color: var(--op-muted);
font-size: .72rem;
font-weight: 780;
letter-spacing: .02em;
}
.op-station-choice:hover .op-station-choice-inner,
.op-station-choice input:focus-visible + .op-station-choice-inner {
transform: translateY(-1px);
border-color: rgba(255,107,0,.45);
box-shadow: 0 14px 32px rgba(6,37,91,.10);
}
.op-station-choice input:checked + .op-station-choice-inner {
border-color: var(--op-secondary);
background: linear-gradient(135deg, rgba(255,107,0,.12), rgba(255,255,255,.96));
box-shadow: 0 18px 44px rgba(255,107,0,.16);
}
.op-station-branch-state {
display: grid;
gap: 12px;
padding: 14px;
border-radius: 20px;
background: rgba(246,248,252,.82);
border: 1px solid rgba(6,37,91,.08);
}
.op-station-branch-state + .op-station-branch-state {
margin-top: 12px;
}
.op-station-branch-state-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.op-station-branch-state-head strong {
color: var(--op-text);
font-weight: 850;
}
.op-station-branch-state-head span {
color: var(--op-muted);
font-size: .75rem;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-station-state-icons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.op-station-state-item {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(6,37,91,.08);
}
.op-station-state-item.is-closed {
opacity: .74;
}
.op-station-day-list {
display: grid;
gap: 18px;
}
.op-station-day-group {
display: grid;
gap: 10px;
}
.op-station-day-title {
display: flex;
align-items: center;
gap: 10px;
color: var(--op-text);
}
.op-station-day-title strong {
font-size: .95rem;
font-weight: 880;
}
.op-station-day-title span {
border-radius: 999px;
background: rgba(6,37,91,.08);
color: var(--op-muted);
font-size: .72rem;
font-weight: 850;
padding: 5px 9px;
}
.op-station-turn-list {
display: grid;
gap: 8px;
}
.op-station-turn-line {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
min-height: 62px;
padding: 10px 12px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(6,37,91,.08);
}
.op-station-turn-line.is-open {
background: linear-gradient(135deg, rgba(18,128,92,.08), #fff);
border-color: rgba(18,128,92,.22);
}
.op-station-turn-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.op-station-turn-copy span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-station-code-created-modal {
width: min(520px, calc(100vw - 32px));
padding: clamp(22px, 4vw, 34px);
text-align: center;
border: 1px solid rgba(255,107,0,.28);
}
.op-station-generated-head {
display: grid;
gap: 3px;
margin-bottom: 16px;
}
.op-station-generated-head h2 {
margin: 0;
color: var(--op-text);
font-size: clamp(1.25rem, 3vw, 1.8rem);
line-height: 1;
font-weight: 880;
}
.op-station-generated-head p:last-child {
margin: 0;
color: var(--op-muted);
font-weight: 800;
}
.op-station-generated-code {
border-radius: 24px;
background: linear-gradient(135deg, rgba(255,107,0,.16), rgba(255,255,255,.98));
border: 1px dashed rgba(255,107,0,.52);
color: var(--op-secondary);
font-size: clamp(3.2rem, 12vw, 5.5rem);
font-weight: 920;
letter-spacing: .12em;
line-height: 1;
padding: 22px 14px;
margin-bottom: 14px;
user-select: all;
}
.op-station-warning-card {
display: grid;
gap: 4px;
text-align: left;
border-radius: 18px;
padding: 13px 14px;
background: rgba(180,35,24,.08);
color: var(--op-danger);
border: 1px solid rgba(180,35,24,.18);
margin-bottom: 16px;
}
.op-station-warning-card strong {
font-weight: 900;
}
.op-station-warning-card span {
color: #7a241d;
font-size: .86rem;
font-weight: 700;
line-height: 1.35;
}
.op-station-generated-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
}
@media (max-width: 1020px) {
.op-stations-admin-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.op-station-picker,
.op-station-state-icons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-station-turn-line {
grid-template-columns: auto minmax(0, 1fr);
}
.op-station-turn-line > .op-status,
.op-station-turn-line > form {
grid-column: 2;
justify-self: start;
}
.op-station-generated-actions {
grid-template-columns: 1fr;
}
}
/* PATCH 067 · Sobre el sistema */
.op-branch-devbar {
flex-wrap: wrap;
row-gap: 2px;
}
.op-branch-devbar .op-branch-system-link {
font-weight: 900;
}
.op-branch-devbar-separator {
opacity: .55 !important;
}
.op-about-hero {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 22px;
align-items: center;
padding: 26px;
background:
radial-gradient(circle at top left, rgba(255,255,255,.92), rgba(255,255,255,.72)),
linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.op-about-logo-wrap {
display: grid;
place-items: center;
min-height: 132px;
border-radius: 26px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .08);
box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}
.op-about-logo {
max-width: 132px;
max-height: 92px;
object-fit: contain;
}
.op-about-hero-copy h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: -.05em;
color: var(--op-text);
}
.op-about-hero-copy h1 span {
color: var(--op-secondary);
font-weight: 900;
}
.op-about-hero-copy p:not(.op-kicker) {
margin: 8px 0 0;
max-width: 760px;
color: var(--op-muted);
font-size: 1.02rem;
line-height: 1.55;
}
.op-about-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.op-about-tags span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(6, 37, 91, .07);
color: var(--op-primary);
font-size: .78rem;
font-weight: 850;
}
.op-about-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, .82fr);
gap: 16px;
}
.op-about-card {
padding: 22px;
}
.op-about-card-main {
grid-row: span 1;
}
.op-about-card h2 {
margin: 0 0 10px;
color: var(--op-text);
letter-spacing: -.025em;
}
.op-about-card p:not(.op-kicker) {
color: var(--op-muted);
line-height: 1.55;
}
.op-about-data-list {
display: grid;
gap: 10px;
margin: 0;
}
.op-about-data-list div {
display: grid;
gap: 3px;
padding: 10px 0;
border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.op-about-data-list div:last-child {
border-bottom: 0;
}
.op-about-data-list dt {
color: var(--op-muted);
font-size: .74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.op-about-data-list dd {
margin: 0;
color: var(--op-text);
font-size: .96rem;
font-weight: 850;
overflow-wrap: anywhere;
}
.op-about-section-head {
margin-bottom: 14px;
}
.op-about-module-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.op-about-module {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 13px;
border-radius: 18px;
background: rgba(6, 37, 91, .045);
border: 1px solid rgba(15, 23, 42, .06);
}
.op-about-module > span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 20px rgba(15, 23, 42, .06);
font-size: 1.1rem;
flex: 0 0 auto;
}
.op-about-module strong {
display: block;
color: var(--op-text);
font-size: .92rem;
margin-bottom: 3px;
}
.op-about-module p {
margin: 0;
color: var(--op-muted);
font-size: .78rem;
line-height: 1.38;
}
.op-about-branch-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.op-about-branch-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 18px;
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(15, 23, 42, .07);
}
.op-about-branch-item > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--op-primary);
color: #fff;
font-size: .76rem;
font-weight: 950;
}
.op-about-branch-item strong {
display: block;
color: var(--op-text);
}
.op-about-branch-item small {
display: block;
color: var(--op-muted);
margin-top: 2px;
}
.op-about-dev-link {
margin-top: 12px;
width: 100%;
justify-content: center;
}
.op-about-security-note {
display: flex;
align-items: center;
gap: 14px;
border-left: 5px solid var(--op-secondary);
}
.op-about-security-note strong {
color: var(--op-primary);
white-space: nowrap;
}
.op-about-security-note p {
margin: 0;
color: var(--op-muted);
}
@media (max-width: 1100px) {
.op-about-module-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.op-about-hero,
.op-about-grid {
grid-template-columns: 1fr;
}
.op-about-logo-wrap {
min-height: 104px;
}
.op-about-branch-list,
.op-about-module-grid {
grid-template-columns: 1fr;
}
.op-about-security-note {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
@media (max-width: 520px) {
.op-branch-devbar {
justify-content: center;
gap: 4px;
padding-inline: 8px;
}
.op-branch-devbar .op-branch-system-link {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* PATCH 068 · Estaciones: corrección de desplazamiento horizontal */
.op-stations-admin-page {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
@supports not (overflow: clip) {
.op-stations-admin-page { overflow-x: hidden; }
}
.op-stations-admin-page .op-stations-admin-grid,
.op-stations-admin-page .op-stations-generate-card,
.op-stations-admin-page .op-stations-state-card,
.op-stations-admin-page .op-station-history-card,
.op-stations-admin-page .op-station-code-form-compact,
.op-stations-admin-page .op-station-picker,
.op-stations-admin-page .op-station-branch-state,
.op-stations-admin-page .op-station-day-list,
.op-stations-admin-page .op-station-turn-list,
.op-stations-admin-page .op-station-turn-line {
min-width: 0;
max-width: 100%;
}
.op-stations-admin-page .op-stations-admin-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
}
.op-stations-admin-page .op-station-picker {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.op-stations-admin-page .op-station-turn-line > * {
min-width: 0;
}
.op-stations-admin-page .op-station-generated-code {
max-width: 100%;
overflow-wrap: anywhere;
}
@media (max-width: 1240px) {
.op-stations-admin-page .op-stations-admin-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.op-stations-admin-page .op-station-picker,
.op-stations-admin-page .op-station-state-icons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.op-stations-admin-page .op-station-picker,
.op-stations-admin-page .op-station-state-icons {
grid-template-columns: 1fr;
}
}
/* PATCH 069 · Estaciones: bloqueo real del desplazamiento horizontal de raíz */
html,
body.op-body {
max-width: 100%;
overflow-x: hidden;
}
body.op-stations-route {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body.op-stations-route .op-branch-frame,
body.op-stations-route .op-branch-topbar-admin,
body.op-stations-route .op-branch-admin-content,
body.op-stations-route .op-stations-admin-page,
body.op-stations-route .op-stations-admin-grid,
body.op-stations-route .op-stations-generate-card,
body.op-stations-route .op-stations-state-card,
body.op-stations-route .op-station-history-card {
width: 100%;
max-width: 100%;
min-width: 0;
}
body.op-stations-route .op-branch-frame,
body.op-stations-route .op-branch-admin-content,
body.op-stations-route .op-stations-admin-page {
overflow-x: clip;
}
@supports not (overflow: clip) {
body.op-stations-route .op-branch-frame,
body.op-stations-route .op-branch-admin-content,
body.op-stations-route .op-stations-admin-page {
overflow-x: hidden;
}
}
body.op-stations-route .op-branch-topbar-admin,
body.op-stations-route .op-branch-devbar {
max-width: 100vw;
overflow-x: hidden;
}
body.op-stations-route .op-branch-admin-content {
padding-left: clamp(18px, 2.6vw, 36px);
padding-right: clamp(18px, 2.6vw, 36px);
}
body.op-stations-route .op-stations-admin-grid {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1320px) {
body.op-stations-route .op-stations-admin-grid {
grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
}
}
body.op-stations-route .op-station-picker {
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}
body.op-stations-route .op-station-choice-inner,
body.op-stations-route .op-station-state-item,
body.op-stations-route .op-station-turn-line {
min-width: 0;
overflow: hidden;
}
body.op-stations-route .op-station-choice-inner > span:last-child,
body.op-stations-route .op-station-state-item > span:last-child,
body.op-stations-route .op-station-turn-copy {
min-width: 0;
}
body.op-stations-route .op-station-state-item b,
body.op-stations-route .op-station-state-item small,
body.op-stations-route .op-station-choice-inner b,
body.op-stations-route .op-station-choice-inner small {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.op-stations-route .op-station-history-card {
overflow-x: hidden;
}
body.op-stations-route .op-station-turn-list {
overflow-x: hidden;
}
@media (max-width: 1319px) {
body.op-stations-route .op-stations-state-card {
max-height: none;
}
}
/* PATCH 070 · Administración local: barra superior fija */
:root {
--op-branch-admin-topbar-height: 74px;
}
body.op-branch-body .op-branch-frame {
padding-top: var(--op-branch-admin-topbar-height);
}
body.op-branch-body .op-branch-topbar-admin {
position: fixed;
top: 0;
left: 0;
right: 0;
width: auto;
max-width: 100%;
min-width: 0;
z-index: 60;
box-sizing: border-box;
overflow-x: hidden;
}
body.op-branch-body .op-branch-admin-content {
scroll-margin-top: calc(var(--op-branch-admin-topbar-height) + 12px);
}
body.op-branch-body .op-branch-devbar {
z-index: 55;
}
@media (max-width: 1180px) {
body.op-branch-body .op-branch-frame {
padding-top: var(--op-branch-admin-topbar-height, 116px);
}
}
@media (max-width: 720px) {
:root {
--op-branch-admin-topbar-height: 132px;
}
body.op-branch-body .op-branch-topbar-admin {
max-height: 100dvh;
overflow-y: auto;
}
}
/* PATCH 071 · Estación Delivery: recuperación visual del flujo operativo */
.op-station-shell-wide.op-delivery-shell-clean {
display: block;
width: 100%;
min-height: 100dvh;
padding: clamp(12px, 1.8vw, 22px);
overflow-x: hidden;
background:
radial-gradient(circle at top left, rgba(255, 107, 0, .13), transparent 32%),
radial-gradient(circle at top right, rgba(6, 87, 184, .10), transparent 34%),
linear-gradient(180deg, #fff8ef 0%, #f5f7fb 48%, #eef3f8 100%);
}
.op-delivery-shell-clean *,
.op-delivery-shell-clean *::before,
.op-delivery-shell-clean *::after {
box-sizing: border-box;
min-width: 0;
}
.op-delivery-dashboard {
width: min(1640px, 100%);
margin: 0 auto;
display: grid;
gap: 14px;
color: var(--op-text, #14213d);
}
.op-delivery-topbar-clean {
position: sticky;
top: clamp(8px, 1.2vw, 14px);
z-index: 14;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px clamp(14px, 2vw, 22px);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 24px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
backdrop-filter: blur(16px);
}
.op-delivery-title-group {
display: grid;
gap: 3px;
}
.op-delivery-title-group h1 {
margin: 0;
color: var(--op-primary, #06255b);
font-size: clamp(1.75rem, 3.2vw, 2.8rem);
line-height: .96;
font-weight: 760;
letter-spacing: -.04em;
}
.op-delivery-title-group > span {
color: var(--op-muted, #667085);
font-size: .82rem;
font-weight: 650;
letter-spacing: .02em;
}
.op-delivery-top-actions {
display: flex;
align-items: stretch;
justify-content: flex-end;
gap: 9px;
flex-wrap: wrap;
}
.op-delivery-top-actions form {
margin: 0;
}
.op-delivery-top-metric {
min-width: 96px;
display: grid;
align-content: center;
gap: 2px;
padding: 9px 12px;
border: 1px solid rgba(6, 37, 91, .08);
border-radius: 18px;
background: rgba(6, 37, 91, .045);
}
.op-delivery-top-metric span {
color: var(--op-muted, #667085);
font-size: .68rem;
font-weight: 760;
letter-spacing: .07em;
text-transform: uppercase;
}
.op-delivery-top-metric strong {
color: var(--op-primary, #06255b);
font-size: 1.1rem;
line-height: 1;
font-weight: 780;
}
.op-delivery-top-metric.is-money {
border-color: rgba(247, 44, 8, .18);
background: rgba(247, 44, 8, .07);
}
.op-delivery-alert {
margin: 0;
}
.op-alert-success {
background: rgba(18, 128, 92, .12);
color: var(--op-success, #12805c);
}
.op-alert-danger {
background: rgba(180, 35, 24, .12);
color: var(--op-danger, #b42318);
}
.op-btn-compact {
min-height: 42px;
border-radius: 14px;
padding: 10px 14px;
font-size: .88rem;
}
.op-delivery-dashboard-grid {
display: grid;
grid-template-columns: minmax(260px, .82fr) minmax(420px, 1.36fr) minmax(240px, .58fr);
gap: 14px;
align-items: start;
}
.op-delivery-panel {
min-width: 0;
display: grid;
gap: 12px;
padding: clamp(14px, 1.7vw, 20px);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 26px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}
.op-delivery-queue-clean,
.op-delivery-runs-clean {
align-content: start;
}
.op-delivery-recent-clean {
align-content: start;
position: sticky;
top: 108px;
}
.op-delivery-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.op-delivery-panel-head.compact {
align-items: flex-start;
}
.op-delivery-panel-head h2,
.op-delivery-panel-title h2 {
margin: 0;
color: var(--op-text, #14213d);
font-size: clamp(1.05rem, 1.55vw, 1.35rem);
line-height: 1.05;
font-weight: 720;
letter-spacing: -.02em;
}
.op-delivery-panel-title {
display: flex;
align-items: center;
gap: 10px;
}
.op-delivery-icon {
width: 44px;
height: 44px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 16px;
font-size: 1.16rem;
background: rgba(6, 37, 91, .08);
}
.op-delivery-icon.is-queue {
background: rgba(255, 107, 0, .13);
}
.op-delivery-icon.is-route {
background: rgba(6, 87, 184, .10);
}
.op-delivery-count {
min-width: 34px;
min-height: 34px;
display: inline-grid;
place-items: center;
padding: 5px 9px;
border-radius: 999px;
background: var(--op-primary, #06255b);
color: #fff;
font-size: .86rem;
font-weight: 760;
}
.op-delivery-queue-form-clean,
.op-delivery-run-list-clean,
.op-delivery-order-list-clean,
.op-delivery-queue-list-clean,
.op-delivery-recent-list-clean {
display: grid;
gap: 10px;
}
.op-delivery-queue-form-clean {
gap: 12px;
}
.op-delivery-ready-clean-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 12px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 20px;
background: rgba(248, 250, 252, .88);
cursor: pointer;
transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.op-delivery-ready-clean-card:hover,
.op-delivery-ready-clean-card:focus-within {
transform: translateY(-1px);
border-color: rgba(255, 107, 0, .28);
background: #fff;
box-shadow: 0 14px 32px rgba(255, 107, 0, .08);
}
.op-delivery-ready-clean-card input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 2px 0 0;
accent-color: var(--op-secondary, #ff6b00);
}
.op-delivery-ready-main {
display: grid;
gap: 5px;
}
.op-delivery-ready-title,
.op-delivery-run-clean-head,
.op-delivery-order-clean-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.op-delivery-ready-title strong,
.op-delivery-order-clean-head strong,
.op-delivery-run-clean-head h3 {
color: var(--op-text, #14213d);
font-weight: 760;
line-height: 1.08;
}
.op-delivery-ready-title span,
.op-delivery-money-pill {
color: var(--op-primary, #06255b);
font-size: .86rem;
font-weight: 780;
white-space: nowrap;
}
.op-delivery-ready-main p,
.op-delivery-ready-main small,
.op-delivery-order-clean-head span,
.op-delivery-address-clean span,
.op-delivery-address-clean small,
.op-delivery-recent-item-clean span,
.op-delivery-recent-item-clean small,
.op-delivery-more-items,
.op-delivery-empty-clean small {
color: var(--op-muted, #667085);
font-weight: 620;
line-height: 1.32;
}
.op-delivery-ready-main p {
margin: 0;
font-size: .9rem;
}
.op-delivery-ready-main small,
.op-delivery-recent-item-clean small {
font-size: .78rem;
}
.op-delivery-mini-items,
.op-delivery-items-clean {
display: grid;
gap: 6px;
}
.op-delivery-mini-items span {
display: block;
width: max-content;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px 8px;
border-radius: 999px;
background: rgba(6, 37, 91, .06);
color: var(--op-primary, #06255b);
font-size: .74rem;
font-weight: 680;
}
.op-delivery-empty-clean {
min-height: 180px;
display: grid;
place-items: center;
align-content: center;
gap: 8px;
padding: 20px;
border: 1px dashed rgba(15, 23, 42, .14);
border-radius: 22px;
background: rgba(248, 250, 252, .80);
text-align: center;
}
.op-delivery-empty-clean > span {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(18, 128, 92, .11);
color: var(--op-success, #12805c);
font-size: 1.3rem;
}
.op-delivery-empty-clean strong {
color: var(--op-text, #14213d);
font-size: 1rem;
font-weight: 720;
}
.op-delivery-run-clean-card {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid rgba(6, 37, 91, .10);
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.op-delivery-run-clean-head h3 {
margin: 4px 0 0;
color: var(--op-primary, #06255b);
font-size: 1.12rem;
}
.op-delivery-money-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 107, 0, .12);
color: #9a3412;
}
.op-delivery-run-actions-clean {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.op-delivery-run-actions-clean form {
margin: 0;
}
.op-delivery-settle-clean {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(245, 158, 11, .22);
border-radius: 18px;
background: rgba(245, 158, 11, .11);
color: #7c2d12;
}
.op-delivery-settle-clean span {
font-size: .76rem;
font-weight: 760;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-delivery-settle-clean strong {
font-weight: 780;
}
.op-delivery-order-clean-card {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 20px;
background: #fff;
}
.op-delivery-order-clean-card.is-failed {
border-color: rgba(180, 35, 24, .20);
background: rgba(180, 35, 24, .035);
}
.op-delivery-order-clean-head em {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(6, 87, 184, .09);
color: #064f9b;
font-size: .72rem;
font-style: normal;
font-weight: 760;
white-space: nowrap;
}
.op-delivery-address-clean {
display: grid;
gap: 3px;
padding: 10px 11px;
border-radius: 16px;
background: rgba(6, 37, 91, .045);
}
.op-delivery-address-clean strong {
color: var(--op-primary, #06255b);
font-size: .82rem;
font-weight: 760;
letter-spacing: .04em;
}
.op-delivery-items-clean > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 10px;
padding: 9px 0;
border-top: 1px solid rgba(15, 23, 42, .07);
}
.op-delivery-items-clean > div:first-child {
border-top: 0;
padding-top: 0;
}
.op-delivery-items-clean strong {
color: var(--op-text, #14213d);
font-size: .84rem;
font-weight: 720;
line-height: 1.2;
}
.op-delivery-items-clean span {
color: var(--op-primary, #06255b);
font-size: .82rem;
font-weight: 760;
white-space: nowrap;
}
.op-delivery-items-clean small {
grid-column: 1 / -1;
color: var(--op-muted, #667085);
font-size: .75rem;
font-weight: 610;
line-height: 1.28;
}
.op-delivery-more-items {
margin: 0;
font-size: .76rem;
}
.op-delivery-money-grid-clean {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-delivery-money-grid-clean article {
display: grid;
gap: 2px;
padding: 9px 10px;
border-radius: 16px;
background: rgba(248, 250, 252, .96);
border: 1px solid rgba(15, 23, 42, .06);
}
.op-delivery-money-grid-clean span {
color: var(--op-muted, #667085);
font-size: .7rem;
font-weight: 760;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-delivery-money-grid-clean strong {
color: var(--op-primary, #06255b);
font-size: .95rem;
font-weight: 780;
}
.op-delivery-actions-stack {
display: grid;
gap: 9px;
}
.op-delivery-delivered-form-clean,
.op-delivery-failed-form-clean {
display: grid;
gap: 9px;
padding: 10px;
border-radius: 18px;
background: rgba(6, 37, 91, .035);
border: 1px solid rgba(6, 37, 91, .07);
}
.op-delivery-delivered-form-clean {
grid-template-columns: minmax(120px, 160px) minmax(180px, 1fr) auto;
align-items: end;
}
.op-delivery-delivered-form-clean label,
.op-delivery-failed-form-clean label {
display: grid;
gap: 5px;
color: var(--op-muted, #667085);
font-size: .75rem;
font-weight: 720;
}
.op-delivery-delivered-form-clean input,
.op-delivery-failed-form-clean input {
width: 100%;
min-height: 42px;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 14px;
padding: 8px 10px;
background: #fff;
color: var(--op-text, #14213d);
outline: none;
}
.op-delivery-delivered-form-clean input:focus,
.op-delivery-failed-form-clean input:focus {
border-color: rgba(255, 107, 0, .36);
box-shadow: 0 0 0 4px rgba(255, 107, 0, .10);
}
.op-delivery-delivered-form-clean input[type="file"] {
padding: 8px;
color: var(--op-muted, #667085);
font-size: .78rem;
}
.op-delivery-delivered-form-clean input[type="file"]::file-selector-button {
margin-right: 8px;
border: 0;
border-radius: 10px;
background: rgba(6, 37, 91, .08);
color: var(--op-primary, #06255b);
padding: 7px 9px;
font-weight: 720;
}
.op-delivery-paid-note {
min-height: 42px;
align-self: stretch;
justify-content: center;
}
.op-delivery-failed-details {
display: grid;
gap: 8px;
}
.op-delivery-failed-details summary {
width: max-content;
max-width: 100%;
cursor: pointer;
color: var(--op-muted, #667085);
font-size: .82rem;
font-weight: 720;
}
.op-delivery-failed-form-clean {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.op-delivery-recent-head-clean h2 {
margin: 0;
color: var(--op-text, #14213d);
font-size: 1.05rem;
font-weight: 720;
}
.op-delivery-recent-item-clean {
display: grid;
gap: 4px;
padding: 11px 12px;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
background: rgba(248, 250, 252, .90);
transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.op-delivery-recent-item-clean:hover,
.op-delivery-recent-item-clean:focus-visible {
transform: translateY(-1px);
border-color: rgba(6, 87, 184, .20);
background: #fff;
outline: none;
}
.op-delivery-recent-item-clean strong {
color: var(--op-primary, #06255b);
font-size: .88rem;
font-weight: 760;
}
@media (max-width: 1320px) {
.op-delivery-dashboard-grid {
grid-template-columns: minmax(260px, .85fr) minmax(390px, 1.25fr);
}
.op-delivery-recent-clean {
grid-column: 1 / -1;
position: static;
}
.op-delivery-recent-list-clean {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
@media (max-width: 920px) {
.op-station-shell-wide.op-delivery-shell-clean {
padding: 10px;
}
.op-delivery-topbar-clean {
position: static;
align-items: stretch;
flex-direction: column;
}
.op-delivery-top-actions {
justify-content: stretch;
}
.op-delivery-top-actions > *,
.op-delivery-top-actions form,
.op-delivery-top-actions .op-btn {
flex: 1 1 140px;
}
.op-delivery-dashboard-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.op-delivery-dashboard {
gap: 10px;
}
.op-delivery-topbar-clean,
.op-delivery-panel,
.op-delivery-run-clean-card,
.op-delivery-order-clean-card {
border-radius: 20px;
}
.op-delivery-top-actions,
.op-delivery-run-actions-clean {
display: grid;
grid-template-columns: 1fr;
}
.op-delivery-ready-title,
.op-delivery-run-clean-head,
.op-delivery-order-clean-head,
.op-delivery-settle-clean {
display: grid;
grid-template-columns: 1fr;
}
.op-delivery-delivered-form-clean,
.op-delivery-failed-form-clean,
.op-delivery-money-grid-clean {
grid-template-columns: 1fr;
}
.op-delivery-run-actions-clean .op-btn,
.op-delivery-delivered-form-clean .op-btn,
.op-delivery-failed-form-clean .op-btn {
width: 100%;
}
}
.op-delivery-empty-clean.is-run-empty {
min-height: 260px;
}
/* PATCH 075 · Delivery: respiro visual bajo barra superior */
.op-delivery-shell-clean .op-delivery-dashboard {
row-gap: clamp(18px, 2vw, 28px);
}
.op-delivery-shell-clean .op-delivery-topbar-clean {
margin-bottom: clamp(4px, .7vw, 10px);
}
.op-delivery-shell-clean .op-delivery-dashboard-grid {
margin-top: clamp(4px, .8vw, 12px);
}
@media (max-width: 640px) {
.op-delivery-shell-clean .op-delivery-dashboard {
row-gap: 14px;
}
.op-delivery-shell-clean .op-delivery-topbar-clean {
margin-bottom: 4px;
}
.op-delivery-shell-clean .op-delivery-dashboard-grid {
margin-top: 2px;
}
}
/* PATCH 077 · Cantidad directa en productos con variaciones */
.op-catalog-add-form {
margin: 0;
min-width: 0;
}
.op-catalog-add-line {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 8px;
align-items: stretch;
min-width: 0;
}
.op-catalog-qty-mini {
min-width: 0;
min-height: 46px;
display: grid;
grid-template-columns: 23px minmax(0, 1fr) 23px;
gap: 3px;
align-items: center;
padding: 4px;
border-radius: 14px;
background: rgba(8, 29, 69, .055);
border: 1px solid rgba(8, 29, 69, .1);
}
.op-catalog-qty-mini button {
width: 23px;
height: 34px;
border: 0;
border-radius: 10px;
background: #081d45;
color: #fff;
font-size: 1rem;
font-weight: 850;
line-height: 1;
}
.op-catalog-qty-mini input {
min-width: 0;
width: 100%;
height: 34px;
border: 0;
border-radius: 10px;
background: #fff;
color: #081d45;
font: inherit;
font-size: .86rem;
font-weight: 850;
text-align: center;
box-shadow: inset 0 0 0 1px rgba(8, 29, 69, .1);
}
.op-catalog-qty-mini input::-webkit-outer-spin-button,
.op-catalog-qty-mini input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.op-catalog-qty-mini input[type="number"] {
-moz-appearance: textfield;
}
.op-catalog-add-line .op-product-button {
min-width: 0;
min-height: 46px;
padding: 8px 9px;
gap: 6px;
}
.op-catalog-add-line .op-product-button span {
min-width: 0;
overflow-wrap: anywhere;
font-size: .9rem;
line-height: 1.05;
}
.op-catalog-add-line .op-product-button b {
flex: 0 0 auto;
line-height: 1.02;
text-align: center;
}
@media (min-width: 1180px) {
.op-catalog-add-line {
grid-template-columns: 86px minmax(0, 1fr);
}
.op-catalog-qty-mini {
grid-template-columns: 26px minmax(0, 1fr) 26px;
}
.op-catalog-qty-mini button {
width: 26px;
}
}
@media (max-width: 560px) {
.op-catalog-add-line {
grid-template-columns: 96px minmax(0, 1fr);
}
.op-catalog-qty-mini {
grid-template-columns: 30px minmax(0, 1fr) 30px;
}
.op-catalog-qty-mini button {
width: 30px;
}
}
/* PATCH 078 · Catálogo compacto + modal rápido de variación y cantidad */
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}
.op-product-tile.op-catalog-compact-tile,
.op-product-tile.op-catalog-compact-tile.op-product-tile-flavors,
.op-comanda-product-grid .op-catalog-compact-tile,
.op-comanda-product-grid .op-catalog-compact-tile.op-touch-product-flavors {
grid-column: auto !important;
min-width: 0;
min-height: 0;
display: block;
padding: 0;
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 20px;
background: #fff;
box-shadow: 0 12px 26px rgba(15, 23, 42, .075);
overflow: hidden;
}
.op-catalog-compact-trigger {
width: 100%;
min-width: 0;
height: 100%;
min-height: 182px;
display: grid;
grid-template-rows: 120px minmax(56px, auto);
gap: 0;
padding: 10px;
border: 0;
background: transparent;
color: #071b3d;
cursor: pointer;
text-align: left;
}
.op-catalog-compact-trigger:hover,
.op-catalog-compact-trigger:focus-visible {
outline: none;
background: rgba(8, 29, 69, .025);
}
.op-catalog-compact-trigger:active {
transform: scale(.985);
}
.op-catalog-compact-media {
min-width: 0;
width: 100%;
height: 120px;
display: grid;
place-items: center;
border-radius: 15px;
overflow: hidden;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.op-catalog-compact-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.op-catalog-compact-media > span {
font-size: 3rem;
line-height: 1;
filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
}
.op-catalog-compact-foot {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 38px;
align-items: center;
gap: 10px;
padding: 11px 2px 0;
}
.op-catalog-compact-foot strong {
min-width: 0;
display: block;
overflow: hidden;
color: #071b3d;
font-size: .98rem;
font-weight: 850;
line-height: 1.08;
letter-spacing: -.015em;
text-transform: uppercase;
text-overflow: ellipsis;
}
.op-catalog-compact-foot b {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 14px;
background: #081d45;
color: #fff;
font-size: 1.35rem;
font-weight: 900;
line-height: 1;
box-shadow: 0 12px 22px rgba(8, 29, 69, .18);
}
.op-product-quick-modal {
z-index: 130;
}
.op-product-quick-modal .op-modal-backdrop {
z-index: 1;
pointer-events: auto;
}
.op-product-quick-card {
z-index: 2;
width: min(620px, calc(100vw - 28px));
max-height: min(90vh, 760px);
display: grid;
gap: 18px;
padding: clamp(20px, 3vw, 28px);
overflow: auto;
border-radius: 28px;
background: #fff;
box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}
.op-product-quick-head {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding-right: 28px;
}
.op-product-quick-icon {
width: 82px;
height: 82px;
display: grid;
place-items: center;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.op-product-quick-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.op-product-quick-icon span {
font-size: 2.7rem;
line-height: 1;
}
.op-product-quick-head h2 {
margin: 2px 0 5px;
color: #071b3d;
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.02;
letter-spacing: -.03em;
}
.op-product-quick-head p {
margin: 0;
color: rgba(7, 27, 61, .66);
font-size: .95rem;
font-weight: 650;
line-height: 1.35;
}
.op-product-quick-options {
display: grid;
gap: 10px;
}
.op-product-quick-option {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 118px 112px;
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid rgba(20, 33, 61, .09);
border-radius: 20px;
background: #f8fafc;
}
.op-product-quick-option-info {
min-width: 0;
display: grid;
gap: 4px;
}
.op-product-quick-option-info strong {
color: #071b3d;
font-size: 1rem;
font-weight: 850;
line-height: 1.1;
}
.op-product-quick-option-info span {
color: #a30606;
font-size: 1.05rem;
font-weight: 900;
line-height: 1;
}
.op-product-quick-qty.op-catalog-qty-mini {
min-height: 46px;
grid-template-columns: 32px minmax(0, 1fr) 32px;
background: #fff;
}
.op-product-quick-qty.op-catalog-qty-mini button {
width: 32px;
height: 36px;
}
.op-product-quick-add {
min-height: 46px;
border: 0;
border-radius: 15px;
background: #081d45;
color: #fff;
font-weight: 900;
letter-spacing: -.01em;
box-shadow: 0 14px 24px rgba(8, 29, 69, .18);
}
.op-product-quick-add:active {
transform: scale(.985);
}
.op-product-quick-empty {
padding: 14px;
border-radius: 18px;
background: rgba(183, 121, 31, .12);
color: #8a560d;
font-weight: 800;
line-height: 1.35;
}
@media (max-width: 980px) {
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
@media (max-width: 640px) {
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.op-catalog-compact-trigger {
min-height: 160px;
grid-template-rows: 100px minmax(50px, auto);
padding: 8px;
}
.op-catalog-compact-media {
height: 100px;
border-radius: 13px;
}
.op-catalog-compact-foot {
grid-template-columns: minmax(0, 1fr) 34px;
gap: 8px;
padding-top: 9px;
}
.op-catalog-compact-foot strong {
font-size: .88rem;
}
.op-catalog-compact-foot b {
width: 34px;
height: 34px;
border-radius: 12px;
}
.op-product-quick-card {
width: calc(100vw - 18px);
padding: 18px;
border-radius: 24px;
}
.op-product-quick-head {
grid-template-columns: 64px minmax(0, 1fr);
gap: 12px;
}
.op-product-quick-icon {
width: 64px;
height: 64px;
border-radius: 18px;
}
.op-product-quick-option {
grid-template-columns: minmax(0, 1fr);
gap: 9px;
}
.op-product-quick-add {
width: 100%;
}
}
/* PATCH 079 · Caja mesa: restaura bloque resumen/detalle lateral */
.op-cashier-table-session .op-comanda-summary-panel {
position: sticky;
top: 14px;
display: grid;
gap: 14px;
min-width: 0;
padding: 18px;
border-radius: 26px;
background: rgba(255, 255, 255, .98);
border: 1px solid rgba(20, 33, 61, .08);
box-shadow: 0 16px 50px rgba(15, 23, 42, .09);
max-height: calc(100vh - 120px);
overflow-y: auto;
overflow-x: hidden;
}
.op-cashier-table-session .op-comanda-account-card {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
min-width: 0;
}
.op-cashier-table-session .op-comanda-account-card > div {
min-width: 0;
padding: 10px;
border-radius: 14px;
background: #f8fafc;
border: 1px solid rgba(20, 33, 61, .08);
}
.op-cashier-table-session .op-comanda-account-card span {
display: block;
color: var(--op-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-size: .68rem;
font-weight: 700;
line-height: 1.1;
}
.op-cashier-table-session .op-comanda-account-card strong {
display: block;
min-width: 0;
margin-top: 4px;
color: var(--op-ink);
font-size: clamp(.92rem, 1.4vw, 1.08rem);
font-weight: 760;
line-height: 1.15;
white-space: nowrap;
}
.op-cashier-table-session .op-comanda-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
}
.op-cashier-table-session .op-comanda-card-head > * {
min-width: 0;
}
.op-cashier-table-session .op-comanda-current-lines .op-ticket-line {
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.op-cashier-table-session .op-ticket-line-main {
min-width: 0;
}
.op-cashier-table-session .op-inline-actions.op-no-margin {
display: grid;
gap: 10px;
}
@media (max-width: 1180px) {
.op-cashier-table-session .op-comanda-summary-panel {
position: static;
max-height: none;
order: -1;
}
}
@media (max-width: 640px) {
.op-cashier-table-session .op-comanda-summary-panel {
padding: 14px;
border-radius: 22px;
}
.op-cashier-table-session .op-comanda-account-card {
grid-template-columns: 1fr;
}
.op-cashier-table-session .op-comanda-current-lines .op-ticket-line {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.op-cashier-table-session .op-comanda-current-lines .op-ticket-line form {
grid-column: 2 / -1;
justify-self: end;
}
}
/* PATCH 080 — iconos POS configurables para categorías */
.op-pos-icon-picker {
display: grid;
gap: 14px;
padding: 18px;
border-radius: 22px;
background: rgba(6, 37, 91, .035);
border: 1px solid rgba(6, 37, 91, .08);
}
.op-pos-icon-picker h3 {
margin: 6px 0 4px;
font-size: 1.08rem;
font-weight: 720;
color: var(--op-text);
}
.op-pos-icon-picker p {
margin: 0;
color: var(--op-muted);
font-size: .9rem;
line-height: 1.42;
}
.op-pos-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 10px;
}
.op-pos-icon-option {
display: block !important;
position: relative;
cursor: pointer;
color: var(--op-text) !important;
font-size: .9rem !important;
font-weight: 650 !important;
}
.op-pos-icon-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.op-pos-icon-choice {
min-height: 68px;
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(20, 33, 61, .10);
box-shadow: 0 10px 26px rgba(6, 37, 91, .06);
transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}
.op-pos-icon-option:hover .op-pos-icon-choice {
transform: translateY(-1px);
border-color: rgba(6, 37, 91, .24);
box-shadow: 0 14px 30px rgba(6, 37, 91, .10);
}
.op-pos-icon-option input:checked + .op-pos-icon-choice {
border-color: rgba(6, 37, 91, .64);
background: rgba(6, 37, 91, .06);
box-shadow: 0 0 0 4px rgba(6, 37, 91, .09);
}
.op-pos-icon-symbol {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 14px;
background: rgba(6, 37, 91, .08);
font-size: 1.45rem;
line-height: 1;
flex: 0 0 auto;
}
.op-pos-icon-text {
min-width: 0;
display: grid;
gap: 2px;
}
.op-pos-icon-text strong {
color: var(--op-text);
font-size: .88rem;
line-height: 1.1;
}
.op-pos-icon-text small {
color: var(--op-muted);
font-size: .72rem;
font-weight: 700;
line-height: 1;
}
.op-pos-icon-table {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(6, 37, 91, .06);
color: var(--op-primary);
white-space: nowrap;
}
.op-pos-icon-table > span {
font-size: 1.16rem;
line-height: 1;
}
.op-pos-icon-table small {
color: var(--op-primary);
font-size: .74rem;
font-weight: 800;
letter-spacing: .02em;
}
@media (max-width: 640px) {
.op-pos-icon-picker {
padding: 14px;
}
.op-pos-icon-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-pos-icon-choice {
align-items: flex-start;
min-height: 76px;
}
}
/* PATCH 083 · Estaciones públicas: 3 sucursales por fila */
.op-public-stations-card {
width: min(1040px, calc(100vw - 32px));
}
.op-public-station-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.op-public-branch-tile {
min-width: 0;
}
.op-public-branch-name {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
@media (max-width: 760px) {
.op-public-station-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 380px) {
.op-public-station-grid {
grid-template-columns: 1fr;
}
}
/* PATCH 084 · Configuración general: layout agrupado y previews */
.op-settings-modern {
display: grid;
gap: 18px;
}
.op-settings-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
.op-settings-panel {
display: grid;
gap: 16px;
padding: clamp(18px, 2.4vw, 26px);
min-width: 0;
}
.op-settings-panel-head {
display: grid;
gap: 4px;
}
.op-settings-panel-head p {
margin: 0;
color: var(--op-muted);
font-size: .72rem;
font-weight: 560;
letter-spacing: .12em;
text-transform: uppercase;
}
.op-settings-panel-head h2 {
margin: 0;
color: var(--op-text);
font-size: clamp(1.12rem, 1.5vw, 1.46rem);
font-weight: 780;
letter-spacing: -.025em;
}
.op-settings-field-grid {
gap: 14px;
}
.op-settings-modern label {
min-width: 0;
}
.op-settings-modern label > span,
.op-settings-backup-panel label > span {
color: var(--op-muted);
font-size: .82rem;
font-weight: 520;
letter-spacing: -.01em;
}
.op-settings-modern input,
.op-settings-modern select,
.op-settings-backup-panel input {
color: var(--op-text);
font-weight: 520;
}
.op-settings-color-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-settings-color-grid label {
display: grid;
grid-template-columns: 1fr 72px;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 10px 12px;
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 16px;
background: rgba(6, 37, 91, .025);
}
.op-settings-color-grid input[type="color"] {
width: 72px;
min-height: 34px;
padding: 3px;
border-radius: 10px;
}
.op-settings-preview-panel {
align-self: stretch;
}
.op-settings-ui-preview {
display: grid;
gap: 14px;
min-height: 100%;
padding: 16px;
border-radius: 22px;
background: var(--preview-background);
border: 1px solid rgba(20, 33, 61, .08);
}
.op-settings-ui-top {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 18px;
background: var(--preview-primary);
color: #fff;
}
.op-settings-ui-mark {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 14px;
background: var(--preview-secondary);
color: #fff;
font-size: 1.08rem;
font-weight: 780;
}
.op-settings-ui-top h3,
.op-settings-ui-card h3 {
margin: 0;
font-size: 1.06rem;
font-weight: 780;
letter-spacing: -.02em;
}
.op-settings-ui-top p,
.op-settings-ui-card p,
.op-settings-ui-card small {
margin: 0;
font-weight: 520;
}
.op-settings-ui-top p {
color: rgba(255, 255, 255, .76);
font-size: .8rem;
}
.op-settings-ui-card {
display: grid;
gap: 6px;
padding: 15px;
border-radius: 18px;
background: var(--preview-surface);
color: var(--preview-text);
border: 1px solid rgba(20, 33, 61, .08);
}
.op-settings-ui-label {
color: var(--preview-muted);
font-size: .72rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
.op-settings-ui-card p,
.op-settings-ui-card small {
color: var(--preview-muted);
line-height: 1.45;
}
.op-settings-ui-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.op-settings-ui-actions span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 6px 8px;
border-radius: 999px;
color: #fff;
font-size: .72rem;
font-weight: 620;
}
.op-settings-ui-actions span:nth-child(1) { background: var(--preview-primary); }
.op-settings-ui-actions span:nth-child(2) { background: var(--preview-secondary); }
.op-settings-ui-actions span:nth-child(3) { background: var(--preview-success); }
.op-settings-ui-actions span:nth-child(4) { background: var(--preview-warning); }
.op-settings-ui-actions span:nth-child(5) { background: var(--preview-danger); }
.op-settings-assets-panel {
grid-column: 1 / -1;
}
.op-settings-asset-note {
padding: 13px 15px;
border-radius: 16px;
background: rgba(6, 37, 91, .055);
color: var(--op-muted);
font-size: .88rem;
line-height: 1.45;
}
.op-settings-assets-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.op-settings-asset-card {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr);
gap: 14px !important;
align-items: center;
min-width: 0;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(20, 33, 61, .08);
background: rgba(255, 255, 255, .78);
box-shadow: 0 14px 32px rgba(15, 23, 42, .045);
}
.op-settings-asset-wide {
grid-column: span 2;
}
.op-settings-asset-thumb {
display: grid;
place-items: center;
width: 112px;
height: 82px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(6, 37, 91, .045), rgba(6, 37, 91, .09));
border: 1px solid rgba(20, 33, 61, .07);
overflow: hidden;
}
.op-settings-asset-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
}
.op-settings-asset-thumb.is-empty span {
color: var(--op-muted);
font-size: .76rem;
font-weight: 520;
}
.op-settings-asset-body {
display: grid;
gap: 5px;
min-width: 0;
}
.op-settings-asset-title {
color: var(--op-text) !important;
font-size: .96rem !important;
font-weight: 740 !important;
letter-spacing: -.02em;
}
.op-settings-asset-hint {
color: var(--op-muted) !important;
font-size: .78rem !important;
font-weight: 500 !important;
line-height: 1.35;
}
.op-settings-asset-current {
color: var(--op-muted) !important;
font-size: .72rem !important;
font-weight: 480 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.op-settings-asset-card input[type="file"] {
width: 100%;
min-height: 38px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid rgba(20, 33, 61, .12);
background: #fff;
color: var(--op-muted);
font-size: .8rem;
font-weight: 500;
}
.op-settings-actions {
padding-top: 10px;
}
.op-settings-backup-panel {
max-width: none;
}
.op-settings-muted {
margin: 0;
color: var(--op-muted);
font-weight: 500;
}
@media (max-width: 1180px) {
.op-settings-layout {
grid-template-columns: 1fr;
}
.op-settings-assets-panel,
.op-settings-asset-wide {
grid-column: auto;
}
}
@media (max-width: 760px) {
.op-settings-assets-grid,
.op-settings-color-grid,
.op-settings-ui-actions {
grid-template-columns: 1fr;
}
.op-settings-asset-card {
grid-template-columns: 92px minmax(0, 1fr);
}
.op-settings-asset-thumb {
width: 92px;
height: 76px;
}
}
@media (max-width: 520px) {
.op-settings-asset-card {
grid-template-columns: 1fr;
}
.op-settings-asset-thumb {
width: 100%;
height: 110px;
}
}
/* PATCH 085 · Catálogo POS 4 items por fila + preparación visual para imágenes */
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.op-comanda-product-grid .op-catalog-compact-tile,
.op-comanda-product-grid .op-catalog-compact-tile.op-touch-product-flavors {
width: 100%;
}
.op-comanda-product-grid .op-catalog-compact-trigger {
min-height: 188px;
}
.op-comanda-product-grid .op-catalog-compact-media {
height: 124px;
}
.op-comanda-product-grid .op-catalog-compact-media img,
.op-product-quick-icon img {
object-fit: cover;
object-position: center;
}
.op-comanda-product-grid .op-catalog-compact-foot strong {
white-space: normal;
overflow-wrap: anywhere;
text-overflow: clip;
}
.op-product-image-admin-field {
display: grid;
grid-template-columns: minmax(0, 1fr) 118px;
gap: 12px;
align-items: end;
min-width: 0;
}
.op-product-image-admin-field > label {
min-width: 0;
}
.op-product-image-admin-preview {
min-width: 0;
height: 72px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 8px;
align-items: center;
padding: 8px;
border: 1px solid rgba(20, 33, 61, .09);
border-radius: 16px;
background: #f8fafc;
}
.op-product-image-admin-preview img,
.op-product-image-admin-preview > span {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 13px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
overflow: hidden;
}
.op-product-image-admin-preview img {
object-fit: cover;
object-position: center;
}
.op-product-image-admin-preview > span {
font-size: 1.55rem;
}
.op-product-image-admin-preview small {
min-width: 0;
color: rgba(7, 27, 61, .62);
font-size: .72rem;
font-weight: 650;
line-height: 1.2;
}
@media (max-width: 980px) {
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.op-product-grid.op-comanda-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.op-comanda-product-grid .op-catalog-compact-trigger {
min-height: 160px;
}
.op-comanda-product-grid .op-catalog-compact-media {
height: 100px;
}
}
@media (max-width: 560px) {
.op-product-image-admin-field {
grid-template-columns: 1fr;
align-items: stretch;
}
.op-product-image-admin-preview {
width: 100%;
}
}
/* PATCH 089 — Confirmación de nueva orden en mesa ocupada */
.op-table-attention-confirm-card {
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.op-table-attention-confirm-card .op-modal-title-block p {
color: var(--op-text);
font-weight: 450;
line-height: 1.48;
}
.op-table-confirm-chip {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 4px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(6, 37, 91, .10);
color: var(--op-primary);
font-size: .88em;
font-weight: 800;
letter-spacing: .045em;
white-space: nowrap;
}
/* PATCH 090 — Overlay oscuro para confirmación de mesa en atención */
.op-table-attention-confirm-backdrop {
background: rgba(8, 14, 28, .72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.op-table-attention-confirm-card {
box-shadow: 0 30px 90px rgba(8, 14, 28, .30);
}
/* PATCH 092 — Reporte diario de sucursal */
.op-daily-report-hero {
display: grid;
gap: 20px;
}
.op-daily-report-filter {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
}
.op-daily-report-filter label {
min-width: min(260px, 100%);
flex: 1 1 220px;
}
.op-daily-report-filter .op-btn {
min-height: 48px;
}
.op-daily-report-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.op-daily-kpi {
min-height: 170px;
display: grid;
align-content: space-between;
gap: 12px;
padding: 22px;
border-radius: 26px;
background: rgba(255,255,255,.97);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 20px 48px rgba(15, 23, 42, .08);
}
.op-daily-kpi span {
color: var(--op-muted);
font-size: .76rem;
font-weight: 760;
letter-spacing: .08em;
text-transform: uppercase;
}
.op-daily-kpi strong {
color: var(--op-text);
font-size: clamp(1.85rem, 3vw, 2.55rem);
line-height: 1;
}
.op-daily-kpi small {
color: var(--op-muted);
line-height: 1.35;
}
.op-daily-kpi-primary {
border-color: rgba(167, 0, 0, .18);
box-shadow: 0 24px 55px rgba(167, 0, 0, .11);
}
.op-daily-kpi-cash {
border-color: rgba(18, 128, 92, .2);
box-shadow: 0 24px 55px rgba(18, 128, 92, .1);
}
.op-daily-report-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.op-daily-report-card {
min-width: 0;
}
.op-daily-table {
display: grid;
gap: 10px;
}
.op-daily-table-head,
.op-daily-table > div:not(.op-daily-table-head) {
display: grid;
grid-template-columns: minmax(160px, 1.4fr) .55fr .7fr minmax(130px, .8fr);
gap: 12px;
align-items: center;
}
.op-daily-table-head {
color: var(--op-muted);
font-size: .72rem;
font-weight: 780;
letter-spacing: .08em;
text-transform: uppercase;
padding: 0 10px;
}
.op-daily-table > div:not(.op-daily-table-head) {
padding: 13px 14px;
border-radius: 16px;
background: rgba(6,37,91,.05);
}
.op-daily-table strong {
color: var(--op-text);
}
.op-daily-table small,
.op-daily-table span {
color: var(--op-muted);
}
.op-daily-cash-breakdown {
display: grid;
gap: 10px;
}
.op-daily-cash-breakdown > div {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 14px;
border-radius: 16px;
background: rgba(6,37,91,.05);
}
.op-daily-cash-breakdown span {
color: var(--op-muted);
}
.op-daily-cash-breakdown strong {
color: var(--op-text);
}
.op-daily-cash-breakdown .is-income strong {
color: var(--op-success);
}
.op-daily-cash-breakdown .is-expense strong {
color: var(--op-danger);
}
.op-daily-cash-total {
margin-top: 6px;
background: var(--op-text) !important;
color: #fff;
}
.op-daily-cash-total span,
.op-daily-cash-total strong {
color: #fff;
}
@media (max-width: 1180px) {
.op-daily-report-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.op-daily-report-grid {
grid-template-columns: 1fr;
}
.op-daily-table-head,
.op-daily-table > div:not(.op-daily-table-head) {
grid-template-columns: 1fr;
}
.op-daily-table-head {
display: none;
}
}
@media (max-width: 640px) {
.op-daily-report-kpis {
grid-template-columns: 1fr;
}
.op-daily-report-filter {
align-items: stretch;
}
.op-daily-report-filter label,
.op-daily-report-filter .op-btn {
width: 100%;
}
}
/* PATCH 093 — Panel de ventas detallado por método de pago */
.op-daily-sales-detail-card {
margin-top: 16px;
display: grid;
gap: 18px;
}
.op-daily-sales-detail-head {
align-items: start;
}
.op-daily-sales-summary-chip {
min-width: 160px;
display: grid;
gap: 4px;
justify-items: end;
padding: 12px 16px;
border-radius: 18px;
background: rgba(6, 37, 91, .06);
border: 1px solid rgba(6, 37, 91, .08);
}
.op-daily-sales-summary-chip span {
color: var(--op-muted);
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-daily-sales-summary-chip strong {
color: var(--op-text);
font-size: 1.25rem;
}
.op-daily-sales-filter {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px;
padding: 14px;
border-radius: 22px;
background: rgba(6,37,91,.04);
border: 1px solid rgba(6,37,91,.07);
}
.op-daily-sales-filter label {
min-width: min(320px, 100%);
flex: 1 1 320px;
}
.op-daily-sales-filter .op-btn {
min-height: 48px;
}
.op-daily-sales-list {
display: grid;
gap: 14px;
}
.op-daily-sale-card {
display: grid;
gap: 14px;
padding: 16px;
border-radius: 24px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
}
.op-daily-sale-card > header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
}
.op-daily-sale-card h3 {
margin: 6px 0 4px;
color: var(--op-text);
font-size: 1.25rem;
line-height: 1.1;
}
.op-daily-sale-card p {
margin: 0;
color: var(--op-muted);
}
.op-daily-sale-channel {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: rgba(167, 0, 0, .08);
color: var(--op-secondary);
font-size: .72rem;
font-weight: 780;
letter-spacing: .08em;
text-transform: uppercase;
}
.op-daily-sale-amounts {
min-width: 150px;
display: grid;
gap: 4px;
justify-items: end;
text-align: right;
}
.op-daily-sale-amounts span,
.op-daily-sale-amounts small {
color: var(--op-muted);
}
.op-daily-sale-amounts strong {
color: var(--op-text);
font-size: 1.45rem;
}
.op-daily-sale-payments {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.op-daily-sale-payments > div {
display: grid;
gap: 3px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(18, 128, 92, .07);
border: 1px solid rgba(18, 128, 92, .10);
}
.op-daily-sale-payments span,
.op-daily-sale-payments small {
color: var(--op-muted);
}
.op-daily-sale-payments strong {
color: var(--op-success);
}
.op-daily-sale-orders {
display: grid;
gap: 10px;
}
.op-daily-sale-orders details {
border-radius: 18px;
background: rgba(6,37,91,.04);
border: 1px solid rgba(6,37,91,.08);
overflow: hidden;
}
.op-daily-sale-orders summary {
cursor: pointer;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 13px 14px;
color: var(--op-text);
list-style: none;
}
.op-daily-sale-orders summary::-webkit-details-marker {
display: none;
}
.op-daily-sale-orders summary span {
font-weight: 760;
}
.op-daily-sale-orders summary strong {
color: var(--op-text);
}
.op-daily-sale-order-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 14px 12px;
}
.op-daily-sale-order-meta span {
padding: 5px 9px;
border-radius: 999px;
background: #fff;
color: var(--op-muted);
font-size: .75rem;
}
.op-daily-sale-items {
display: grid;
gap: 8px;
padding: 0 14px 14px;
}
.op-daily-sale-items > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
align-items: start;
padding: 10px 12px;
border-radius: 14px;
background: #fff;
}
.op-daily-sale-items span {
color: var(--op-text);
}
.op-daily-sale-items strong {
color: var(--op-text);
}
.op-daily-sale-items small {
grid-column: 1 / -1;
color: var(--op-muted);
}
@media (max-width: 760px) {
.op-daily-sale-card > header {
grid-template-columns: 1fr;
}
.op-daily-sale-amounts {
justify-items: start;
text-align: left;
}
.op-daily-sales-summary-chip {
justify-items: start;
width: 100%;
}
.op-daily-sales-filter {
align-items: stretch;
}
.op-daily-sales-filter label,
.op-daily-sales-filter .op-btn {
width: 100%;
}
}
/* PATCH 094 — Matriz de ventas con recibo final y detalle por fila */
.op-daily-sales-matrix {
display: grid;
gap: 10px;
}
.op-daily-sales-matrix-head,
.op-daily-sales-matrix-row > summary {
display: grid;
grid-template-columns: minmax(130px, 1.05fr) minmax(105px, .75fr) minmax(150px, 1.2fr) minmax(82px, .55fr) minmax(160px, 1.25fr) minmax(105px, .75fr) minmax(92px, auto);
gap: 12px;
align-items: center;
}
.op-daily-sales-matrix-head {
padding: 0 14px 4px;
color: var(--op-muted);
font-size: .72rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.op-daily-sales-matrix-row {
border-radius: 18px;
background: rgba(255,255,255,.98);
border: 1px solid rgba(20,33,61,.08);
box-shadow: 0 14px 32px rgba(15,23,42,.06);
overflow: hidden;
}
.op-daily-sales-matrix-row > summary {
cursor: pointer;
list-style: none;
padding: 13px 14px;
color: var(--op-text);
}
.op-daily-sales-matrix-row > summary::-webkit-details-marker {
display: none;
}
.op-daily-sales-matrix-row > summary > span {
min-width: 0;
display: grid;
gap: 3px;
}
.op-daily-sales-matrix-row > summary strong {
min-width: 0;
color: var(--op-text);
font-size: .94rem;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-daily-sales-matrix-row > summary small {
min-width: 0;
color: var(--op-muted);
font-size: .76rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-daily-matrix-receipt strong {
font-size: 1rem;
letter-spacing: .02em;
}
.op-daily-matrix-detail-button {
justify-self: end;
width: fit-content;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 9px 13px;
border-radius: 999px;
background: var(--op-primary);
color: #fff !important;
font-size: .78rem;
font-weight: 780;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(15,23,42,.15);
}
.op-daily-sales-matrix-row[open] .op-daily-matrix-detail-button {
background: rgba(6,37,91,.10);
color: var(--op-text) !important;
box-shadow: none;
}
.op-daily-sales-matrix-detail {
display: grid;
gap: 14px;
padding: 14px;
border-top: 1px solid rgba(20,33,61,.08);
background: rgba(6,37,91,.025);
}
.op-daily-sales-detail-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.op-daily-sales-detail-strip > div {
min-width: 0;
display: grid;
gap: 4px;
padding: 11px 12px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(20,33,61,.07);
}
.op-daily-sales-detail-strip span {
color: var(--op-muted);
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-daily-sales-detail-strip strong {
min-width: 0;
color: var(--op-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1020px) {
.op-daily-sales-matrix-head {
display: none;
}
.op-daily-sales-matrix-row > summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-daily-matrix-detail-button {
justify-self: stretch;
width: 100%;
}
.op-daily-sales-detail-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.op-daily-sales-matrix-row > summary,
.op-daily-sales-detail-strip {
grid-template-columns: 1fr;
}
}
/* PATCH 095 · salida segura de mesa */
.op-comanda-back-form {
margin: 0;
padding: 0;
display: inline-flex;
flex: 0 0 auto;
}
.op-comanda-back-form .op-comanda-menu {
cursor: pointer;
font-family: inherit;
}
/* PATCH 098 — Liberación configurable de mesas */
.op-branch-policy-divider { height: 1px; background: rgba(6,37,91,.10); margin: 4px 0; }
.op-branch-policy-note { max-width: 780px; }
/* PATCH 099 · Apertura operativa centralizada de sucursal */
.op-branch-opening-summary {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 10px;
}
.op-branch-opening-item {
min-width: 0;
min-height: 94px;
border: 1px solid rgba(6, 37, 91, .12);
border-radius: 20px;
background: rgba(255,255,255,.86);
display: grid;
place-items: center;
gap: 8px;
padding: 12px 10px;
text-align: center;
}
.op-branch-opening-item.is-open {
background: linear-gradient(135deg, rgba(18,128,92,.08), rgba(255,255,255,.96));
border-color: rgba(18,128,92,.22);
}
.op-branch-opening-item b {
display: block;
color: var(--op-text);
font-weight: 850;
}
.op-branch-opening-item small {
color: var(--op-muted);
font-size: .72rem;
font-weight: 780;
letter-spacing: .02em;
}
@media (max-width: 760px) {
.op-branch-opening-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* PATCH 100 · Estado inmediato y cierre centralizado de sucursal */
.op-station-branch-actions {
margin-top: 12px;
}
.op-station-central-close-note {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(6, 37, 91, .06);
color: var(--op-muted);
font-size: .72rem;
font-weight: 760;
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 760px) {
.op-station-central-close-note {
justify-self: start;
width: 100%;
}
}
.op-stations-state-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* PATCH 102C · Admin General logo principal, iconos definidos y dropdown superior */
:root {
--op-admin-sidebar-width-red: 286px;
--op-admin-topbar-height-red: 82px;
--op-admin-footer-height-red: 38px;
--op-admin-red-fixed: var(--op-admin-red, var(--op-secondary, #e30613));
--op-admin-red-dark-fixed: var(--op-admin-red-fixed);
--op-admin-shell-bg-red: #f2f3f6;
--op-admin-topbar-bg-red: #e3e7ee;
--op-admin-footer-bg-red: var(--op-admin-footer-bg, var(--op-primary, #111827));
}
body.op-admin-shell-red {
width: 100%;
height: 100dvh;
min-height: 100dvh;
overflow: hidden !important;
background: var(--op-admin-shell-bg-red) !important;
}
body.op-admin-shell-red .op-admin-frame-red {
width: 100%;
height: 100dvh;
min-height: 100dvh;
display: block;
padding: 0 !important;
overflow: hidden;
background: var(--op-admin-shell-bg-red);
}
body.op-admin-shell-red .op-admin-sidebar-red {
position: fixed;
inset: 0 auto 0 0;
z-index: 910;
width: var(--op-admin-sidebar-width-red);
height: 100dvh;
padding: 26px 18px 24px;
display: flex;
flex-direction: column;
gap: 22px;
overflow-y: auto;
overflow-x: hidden;
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.11)),
var(--op-admin-red-fixed);
border-right: 0;
box-shadow: 18px 0 46px rgba(151, 13, 22, .18);
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.45) transparent;
}
body.op-admin-shell-red .op-admin-sidebar-red::-webkit-scrollbar { width: 6px; }
body.op-admin-shell-red .op-admin-sidebar-red::-webkit-scrollbar-track { background: transparent; }
body.op-admin-shell-red .op-admin-sidebar-red::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255,255,255,.38);
}
body.op-admin-shell-red .op-admin-brand-red {
min-height: 124px;
display: grid;
place-items: center;
padding: 2px 6px 16px;
color: #fff;
}
body.op-admin-shell-red .op-admin-brand-card-red {
width: min(214px, 94%);
min-height: 112px;
display: grid;
place-items: center;
padding: 15px 17px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(255,255,255,.72);
box-shadow: 0 18px 36px rgba(47, 0, 5, .18);
}
body.op-admin-shell-red .op-admin-brand-logo-red {
width: 100%;
max-height: 88px;
object-fit: contain;
filter: none;
}
body.op-admin-shell-red .op-admin-nav-red {
display: grid;
gap: 5px;
padding-bottom: 16px;
}
body.op-admin-shell-red .op-admin-nav-red a {
min-height: 46px;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 15px;
border-radius: 13px;
color: rgba(255,255,255,.94);
background: transparent;
font-size: .82rem;
font-weight: 500;
letter-spacing: .024em;
line-height: 1;
text-transform: uppercase;
border: 1px solid transparent;
transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
body.op-admin-shell-red .op-admin-nav-red a:hover,
body.op-admin-shell-red .op-admin-nav-red a:focus-visible {
transform: translateX(2px);
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.18);
color: #fff;
outline: none;
}
body.op-admin-shell-red .op-admin-nav-red a.active {
background: #fff;
color: var(--op-admin-red-fixed);
box-shadow: 0 18px 34px rgba(77, 0, 7, .22);
}
body.op-admin-shell-red .op-admin-nav-icon {
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
flex: 0 0 28px;
color: currentColor;
background: transparent;
border: 0;
border-radius: 0;
font-size: 1.25rem;
font-weight: 900;
line-height: 1;
box-shadow: none;
}
body.op-admin-shell-red .op-admin-nav-icon svg {
width: 27px;
height: 27px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2.9;
stroke-linecap: round;
stroke-linejoin: round;
}
body.op-admin-shell-red .op-admin-nav-red a.active .op-admin-nav-icon {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body.op-admin-shell-red .op-admin-nav-red a span:last-child {
font-weight: 500;
}
body.op-admin-shell-red .op-admin-main-red {
min-width: 0;
height: 100dvh;
min-height: 100dvh;
margin-left: var(--op-admin-sidebar-width-red);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--op-admin-shell-bg-red);
}
body.op-admin-shell-red .op-admin-topbar-red {
position: fixed !important;
top: 0;
left: var(--op-admin-sidebar-width-red);
right: 0;
z-index: 930;
width: auto;
height: var(--op-admin-topbar-height-red);
min-height: var(--op-admin-topbar-height-red);
padding: 16px clamp(20px, 3vw, 40px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
color: var(--op-text);
background: rgba(227, 231, 238, .98) !important;
border-bottom: 1px solid rgba(15, 23, 42, .09);
box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
backdrop-filter: blur(14px);
overflow: visible;
}
body.op-admin-shell-red .op-admin-topbar-red h1 {
margin: 3px 0 0;
color: #111827;
font-size: clamp(1.2rem, 2.2vw, 1.72rem);
font-weight: 760;
letter-spacing: -.035em;
}
body.op-admin-shell-red .op-admin-topbar-red .op-kicker {
color: #6b7280;
letter-spacing: .11em;
}
body.op-admin-shell-red .op-admin-topbar-actions-red {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
}
body.op-admin-shell-red .op-admin-user-menu-red {
position: relative;
z-index: 1400;
display: block;
}
body.op-admin-shell-red .op-admin-user-menu-red summary {
list-style: none;
}
body.op-admin-shell-red .op-admin-user-menu-red summary::-webkit-details-marker {
display: none;
}
body.op-admin-shell-red .op-admin-user-card-red {
min-width: 244px;
min-height: 54px;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 12px 7px 7px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .10);
color: #111827;
box-shadow: 0 14px 30px rgba(15, 23, 42, .075);
cursor: pointer;
user-select: none;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body.op-admin-shell-red .op-admin-user-card-red:hover,
body.op-admin-shell-red .op-admin-user-card-red:focus-visible {
transform: translateY(-1px);
border-color: rgba(15, 23, 42, .18);
box-shadow: 0 18px 36px rgba(15, 23, 42, .10);
outline: none;
}
body.op-admin-shell-red .op-admin-user-avatar-red {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: inline-grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, var(--op-admin-red-fixed), rgba(17, 24, 39, .92));
font-size: .95rem;
font-weight: 900;
letter-spacing: .03em;
}
body.op-admin-shell-red .op-admin-user-avatar-red img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.op-admin-shell-red .op-admin-user-copy-red {
min-width: 0;
display: grid;
gap: 1px;
line-height: 1.12;
}
body.op-admin-shell-red .op-admin-user-copy-red strong {
max-width: 160px;
display: block;
color: #111827;
font-size: .84rem;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.op-admin-shell-red .op-admin-user-copy-red small {
max-width: 160px;
display: block;
color: #6b7280;
font-size: .69rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .035em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.op-admin-shell-red .op-admin-user-caret-red {
margin-left: auto;
color: #6b7280;
font-size: 1.04rem;
font-weight: 900;
transition: transform .12s ease;
}
body.op-admin-shell-red .op-admin-user-menu-red[open] .op-admin-user-caret-red {
transform: rotate(180deg);
}
body.op-admin-shell-red .op-admin-user-dropdown-red {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1800;
width: 214px;
padding: 8px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .10);
box-shadow: 0 22px 54px rgba(15, 23, 42, .16);
}
body.op-admin-shell-red .op-admin-user-dropdown-red::before {
content: "";
position: absolute;
top: -6px;
right: 28px;
width: 12px;
height: 12px;
transform: rotate(45deg);
background: #fff;
border-left: 1px solid rgba(15, 23, 42, .10);
border-top: 1px solid rgba(15, 23, 42, .10);
}
body.op-admin-shell-red .op-admin-user-dropdown-red a,
body.op-admin-shell-red .op-admin-user-dropdown-red button {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 11px;
border-radius: 13px;
border: 0;
background: transparent;
color: #111827;
font: inherit;
font-size: .82rem;
font-weight: 760;
text-align: left;
text-decoration: none;
cursor: pointer;
}
body.op-admin-shell-red .op-admin-user-dropdown-red a:hover,
body.op-admin-shell-red .op-admin-user-dropdown-red a:focus-visible,
body.op-admin-shell-red .op-admin-user-dropdown-red button:hover,
body.op-admin-shell-red .op-admin-user-dropdown-red button:focus-visible {
background: #f3f4f6;
outline: none;
}
body.op-admin-shell-red .op-admin-dropdown-icon-red {
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
border-radius: 9px;
background: #f3f4f6;
color: var(--op-admin-red-fixed);
font-size: .9rem;
font-weight: 900;
}
body.op-admin-shell-red .op-admin-content-red {
width: 100%;
height: calc(100dvh - var(--op-admin-topbar-height-red) - var(--op-admin-footer-height-red));
margin: var(--op-admin-topbar-height-red) 0 var(--op-admin-footer-height-red);
padding: clamp(20px, 2.7vw, 34px);
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .55) transparent;
background: var(--op-admin-shell-bg-red);
scroll-margin-top: 0;
}
body.op-admin-shell-red .op-admin-content-red::-webkit-scrollbar { width: 9px; }
body.op-admin-shell-red .op-admin-content-red::-webkit-scrollbar-track { background: transparent; }
body.op-admin-shell-red .op-admin-content-red::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(148, 163, 184, .45);
}
body.op-admin-shell-red .op-admin-footer-red {
position: fixed !important;
left: var(--op-admin-sidebar-width-red);
right: 0;
bottom: 0;
z-index: 920;
height: var(--op-admin-footer-height-red);
min-height: var(--op-admin-footer-height-red);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
padding: 7px 16px;
background: var(--op-admin-footer-bg-red) !important;
border-top: 1px solid rgba(255, 255, 255, .10);
color: rgba(255,255,255,.86);
font-size: .76rem;
font-weight: 680;
box-shadow: 0 -10px 26px rgba(15, 23, 42, .035);
}
body.op-admin-shell-red .op-admin-footer-red a {
color: #fff;
font-weight: 850;
text-decoration: none;
}
body.op-admin-shell-red .op-admin-footer-red a:hover,
body.op-admin-shell-red .op-admin-footer-red a:focus-visible {
text-decoration: underline;
outline: none;
}
body.op-admin-shell-red .op-admin-footer-dot-red {
color: rgba(255,255,255,.58);
}
body.op-admin-shell-red .op-card,
body.op-admin-shell-red .op-entry-card,
body.op-admin-shell-red .op-stations-card {
box-shadow: 0 18px 44px rgba(15, 23, 42, .065);
}
@media (max-width: 1080px) {
:root {
--op-admin-sidebar-width-red: 92px;
}
body.op-admin-shell-red .op-admin-sidebar-red {
padding: 20px 12px;
align-items: center;
}
body.op-admin-shell-red .op-admin-brand-red {
min-height: 72px;
padding-bottom: 10px;
}
body.op-admin-shell-red .op-admin-brand-card-red {
width: 58px;
min-height: 58px;
padding: 8px;
border-radius: 17px;
}
body.op-admin-shell-red .op-admin-brand-logo-red {
width: 100%;
max-height: 42px;
object-fit: contain;
}
body.op-admin-shell-red .op-admin-nav-red a {
width: 62px;
min-height: 52px;
justify-content: center;
padding: 10px;
gap: 0;
}
body.op-admin-shell-red .op-admin-nav-red a span:last-child {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.op-admin-shell-red .op-admin-nav-icon {
width: 31px;
height: 31px;
flex-basis: 31px;
}
body.op-admin-shell-red .op-admin-nav-icon svg {
width: 30px;
height: 30px;
}
body.op-admin-shell-red .op-admin-user-card-red {
min-width: 0;
padding: 7px 10px 7px 7px;
}
body.op-admin-shell-red .op-admin-user-copy-red {
display: none;
}
body.op-admin-shell-red .op-admin-user-dropdown-red {
width: 200px;
}
}
@media (max-width: 720px) {
:root {
--op-admin-sidebar-width-red: 76px;
--op-admin-topbar-height-red: 74px;
--op-admin-footer-height-red: 44px;
}
body.op-admin-shell-red .op-admin-sidebar-red {
padding-inline: 8px;
}
body.op-admin-shell-red .op-admin-brand-card-red {
width: 50px;
min-height: 50px;
padding: 7px;
border-radius: 16px;
}
body.op-admin-shell-red .op-admin-brand-logo-red {
width: 100%;
max-height: 36px;
}
body.op-admin-shell-red .op-admin-nav-red {
gap: 5px;
}
body.op-admin-shell-red .op-admin-nav-red a {
width: 56px;
min-height: 48px;
border-radius: 16px;
}
body.op-admin-shell-red .op-admin-topbar-red {
padding: 12px 14px;
}
body.op-admin-shell-red .op-admin-topbar-red h1 {
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.08rem;
}
body.op-admin-shell-red .op-admin-user-avatar-red {
width: 38px;
height: 38px;
flex-basis: 38px;
}
body.op-admin-shell-red .op-admin-user-card-red {
min-height: 46px;
padding: 5px 8px 5px 5px;
}
body.op-admin-shell-red .op-admin-user-dropdown-red {
right: -4px;
width: 194px;
}
body.op-admin-shell-red .op-admin-content-red {
padding: 16px 12px 18px;
}
body.op-admin-shell-red .op-admin-footer-red {
justify-content: center;
font-size: .68rem;
line-height: 1.1;
padding-inline: 8px;
}
}
/* PATCH 103 · Administración local: menú superior en mayúsculas, texto ligero e iconos tipo emoji */
body.op-branch-body .op-branch-nav-admin {
gap: 6px;
}
body.op-branch-body .op-branch-nav-admin a {
min-height: 42px;
padding: 7px 8px;
gap: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .035em;
}
body.op-branch-body .op-branch-nav-admin a:hover,
body.op-branch-body .op-branch-nav-admin a:focus-visible,
body.op-branch-body .op-branch-nav-admin a.active {
font-weight: 500;
}
body.op-branch-body .op-branch-nav-admin .op-nav-ico {
width: 31px;
height: 31px;
flex: 0 0 31px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: rgba(255, 255, 255, .16);
color: inherit;
box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .10), 0 6px 14px rgba(15, 23, 42, .13);
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
font-size: 1.06rem;
font-weight: 400;
line-height: 1;
text-shadow: none;
}
body.op-branch-body .op-branch-nav-admin a:hover .op-nav-ico,
body.op-branch-body .op-branch-nav-admin a:focus-visible .op-nav-ico,
body.op-branch-body .op-branch-nav-admin a.active .op-nav-ico {
background: rgba(6, 37, 91, .08);
color: inherit;
box-shadow: none;
}
body.op-branch-body .op-branch-nav-label {
text-transform: uppercase;
font-size: .72rem;
font-weight: 500;
letter-spacing: .055em;
}
body.op-branch-body .op-branch-nav-admin a:hover .op-branch-nav-label,
body.op-branch-body .op-branch-nav-admin a:focus-visible .op-branch-nav-label,
body.op-branch-body .op-branch-nav-admin a.active .op-branch-nav-label {
font-weight: 500;
margin-left: 6px;
}
@media (max-width: 1180px) {
body.op-branch-body .op-branch-nav-admin.is-open {
gap: 7px;
}
body.op-branch-body .op-branch-nav-admin a {
padding: 8px 11px 8px 8px;
}
body.op-branch-body .op-branch-nav-label,
body.op-branch-body .op-branch-nav-admin a:hover .op-branch-nav-label,
body.op-branch-body .op-branch-nav-admin a:focus-visible .op-branch-nav-label,
body.op-branch-body .op-branch-nav-admin a.active .op-branch-nav-label {
max-width: 160px;
margin-left: 7px;
opacity: 1;
}
}
/* PATCH 104 — Acciones de exportación del reporte diario */
.op-daily-report-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .55rem;
}
.op-daily-report-actions .op-btn {
min-height: 2.45rem;
white-space: nowrap;
}
@media (max-width: 920px) {
.op-daily-report-actions {
justify-content: flex-start;
width: 100%;
}
}
@media print {
.op-daily-report-actions,
.op-daily-report-filter,
.op-branch-shell-topbar,
.op-branch-shell-footer,
.op-admin-shell-sidebar,
.op-admin-shell-topbar,
.op-admin-shell-footer {
display: none !important;
}
}
/* PATCH 105A — Delivery pagado con entrega pendiente visible, sin regresión UI */
.op-delivery-pending-chip{
display:inline-flex;
align-items:center;
width:max-content;
margin-top:.45rem;
padding:.28rem .62rem;
border-radius:999px;
background:#fff7ed;
border:1px solid rgba(234,88,12,.24);
color:#9a3412;
font-size:.68rem;
line-height:1;
letter-spacing:.055em;
text-transform:uppercase;
font-weight:700;
}
.op-delivery-pending-payment-note{
display:grid;
gap:.25rem;
margin:.75rem 0;
padding:.78rem .9rem;
border-radius:18px;
background:#fff7ed;
border:1px solid rgba(234,88,12,.22);
color:#7c2d12;
}
.op-delivery-pending-payment-note span{
font-size:.68rem;
letter-spacing:.075em;
text-transform:uppercase;
font-weight:800;
}
.op-delivery-pending-payment-note strong{
font-size:.88rem;
line-height:1.25;
font-weight:700;
}
/* PATCH 106 — Promociones visibles en catálogo POS */
.op-promotion-group h2 {
align-items: center;
display: flex;
gap: .45rem;
}
.op-promotion-catalog-grid {
display: grid;
gap: .85rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
padding-bottom: .4rem;
}
.op-promotion-card {
background: #fff;
border: 1px solid rgba(2, 8, 23, .08);
border-radius: 22px;
box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
min-height: 176px;
overflow: hidden;
position: relative;
}
.op-promotion-card.is-locked {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
}
.op-promotion-card-media {
align-items: center;
background: linear-gradient(180deg, rgba(185, 28, 28, .13), rgba(185, 28, 28, .04));
color: #991b1b;
display: flex;
font-size: 2rem;
justify-content: center;
}
.op-promotion-card-body {
display: flex;
flex-direction: column;
gap: .55rem;
padding: .9rem .95rem;
}
.op-promotion-card-head {
align-items: flex-start;
display: flex;
gap: .65rem;
justify-content: space-between;
}
.op-promotion-kicker {
color: #64748b;
display: block;
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.op-promotion-card h3 {
color: #061736;
font-size: 1.02rem;
line-height: 1.1;
margin: .12rem 0 0;
text-transform: uppercase;
}
.op-promotion-status {
border-radius: 999px;
display: inline-flex;
flex: 0 0 auto;
font-size: .64rem;
font-weight: 800;
letter-spacing: .05em;
padding: .34rem .5rem;
text-transform: uppercase;
white-space: nowrap;
}
.op-promotion-status.tone-available {
background: #dcfce7;
color: #166534;
}
.op-promotion-status.tone-scheduled,
.op-promotion-status.tone-day,
.op-promotion-status.tone-time {
background: #ffedd5;
color: #9a3412;
}
.op-promotion-status.tone-channel,
.op-promotion-status.tone-expired {
background: #fee2e2;
color: #991b1b;
}
.op-promotion-price-row {
border: 1px solid rgba(185, 28, 28, .12);
border-radius: 16px;
display: grid;
gap: .1rem;
padding: .55rem .65rem;
}
.op-promotion-price-row strong {
color: #b91c1c;
font-size: 1.12rem;
line-height: 1;
}
.op-promotion-price-row small,
.op-promotion-description,
.op-promotion-rules span,
.op-promotion-components span,
.op-promotion-warning span,
.op-promotion-ready-note {
color: #475569;
font-size: .76rem;
line-height: 1.25;
}
.op-promotion-description {
margin: 0;
}
.op-promotion-components,
.op-promotion-rules,
.op-promotion-warning {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.op-promotion-components span {
background: #f1f5f9;
border-radius: 999px;
color: #0f172a;
padding: .28rem .48rem;
}
.op-promotion-rules span {
background: #fff7ed;
border-radius: 999px;
color: #7c2d12;
padding: .28rem .48rem;
}
.op-promotion-warning {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 14px;
padding: .52rem .6rem;
}
.op-promotion-warning span {
color: #9a3412;
display: block;
width: 100%;
}
.op-promotion-ready-note {
background: #ecfdf5;
border: 1px solid #bbf7d0;
border-radius: 14px;
color: #166534;
padding: .52rem .6rem;
}
@media (max-width: 760px) {
.op-promotion-card {
grid-template-columns: 58px minmax(0, 1fr);
}
.op-promotion-card-head {
flex-direction: column;
}
}
/* PATCH 107 — Promociones seleccionables con componentes reales */
.op-promotion-select-form {
margin-top: 14px;
display: grid;
gap: 12px;
}
.op-promotion-builder {
display: grid;
gap: 10px;
}
.op-promotion-builder-group {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
padding: 12px;
display: grid;
gap: 10px;
}
.op-promotion-builder-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--op-primary, #06183a);
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.op-promotion-choice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 10px;
align-items: start;
padding: 10px;
border-radius: 14px;
background: rgba(248, 250, 252, 0.92);
}
.op-promotion-choice-count {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(5, 24, 58, 0.08);
color: var(--op-primary, #06183a);
font-weight: 800;
grid-row: span 3;
}
.op-promotion-choice label {
display: grid;
gap: 4px;
min-width: 0;
}
.op-promotion-choice label span,
.op-promotion-flavor-box > span {
font-size: 0.70rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.62);
font-weight: 800;
}
.op-promotion-choice select {
width: 100%;
border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 12px;
padding: 9px 10px;
background: #fff;
color: var(--op-primary, #06183a);
font-weight: 700;
}
.op-promotion-choice-fixed {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 12px;
padding: 9px 10px;
background: #fff;
color: var(--op-primary, #06183a);
font-weight: 800;
}
.op-promotion-flavor-box {
display: grid;
gap: 8px;
}
.op-promotion-flavor-grid {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.op-promotion-flavor-grid label {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 999px;
background: #fff;
padding: 7px 10px;
font-size: 0.78rem;
font-weight: 700;
color: var(--op-primary, #06183a);
}
.op-promotion-flavor-grid input {
width: 14px;
height: 14px;
accent-color: var(--op-secondary, #b00000);
}
.op-promotion-add-button {
border: 0;
border-radius: 16px;
padding: 13px 16px;
background: var(--op-secondary, #16a34a);
color: #fff;
font-weight: 900;
letter-spacing: 0.04em;
box-shadow: 0 16px 30px rgba(22, 163, 74, 0.22);
cursor: pointer;
}
.op-promotion-add-button:hover {
transform: translateY(-1px);
}
@media (max-width: 720px) {
.op-promotion-choice {
grid-template-columns: 1fr;
}
.op-promotion-choice-count {
grid-row: auto;
}
}
/* PATCH 111 — Promociones configurables en modal POS */
.op-promotion-card-actions {
margin-top: auto;
display: grid;
gap: .45rem;
}
.op-promotion-config-button {
width: 100%;
border: 0;
border-radius: 16px;
padding: .82rem 1rem;
background: var(--op-secondary, #b00000);
color: #fff;
font-size: .82rem;
font-weight: 900;
letter-spacing: .045em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 14px 30px rgba(176, 0, 0, .18);
touch-action: manipulation;
}
.op-promotion-config-button:hover,
.op-promotion-config-button:focus-visible {
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(176, 0, 0, .24);
}
.op-promotion-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.op-promotion-config-modal {
padding: 14px;
z-index: 130;
}
.op-promotion-config-modal .op-modal-backdrop {
z-index: 1;
pointer-events: auto;
background: rgba(8, 14, 28, .54);
backdrop-filter: blur(8px);
}
.op-promotion-config-card {
z-index: 2;
display: block;
overflow: hidden;
padding: 0;
width: min(900px, calc(100vw - 24px));
max-height: min(94vh, 900px);
border-radius: 28px;
background: #fff;
box-shadow: 0 28px 80px rgba(15, 23, 42, .30);
}
.op-promotion-config-card .op-modal-close {
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: #0f172a;
box-shadow: 0 8px 20px rgba(15, 23, 42, .14);
}
.op-promotion-config-form {
margin-top: 0;
max-height: inherit;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 0;
overflow: hidden;
padding: 0;
}
.op-promotion-config-head {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 22px 72px 16px 22px;
border-bottom: 1px solid rgba(8, 29, 69, .08);
background: #fff;
}
.op-promotion-config-icon {
width: 78px;
height: 78px;
display: grid;
place-items: center;
border-radius: 22px;
background: linear-gradient(180deg, rgba(185, 28, 28, .13), rgba(185, 28, 28, .04));
font-size: 2.5rem;
}
.op-promotion-config-head h2 {
margin: .08rem 0 .3rem;
color: #061736;
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.02;
letter-spacing: -.03em;
text-transform: uppercase;
}
.op-promotion-config-head p {
margin: 0;
color: rgba(15, 23, 42, .66);
font-size: .94rem;
font-weight: 650;
line-height: 1.35;
}
.op-promotion-config-body {
min-height: 0;
overflow: auto;
padding: 16px 18px;
display: grid;
gap: 14px;
background: #f8fafc;
}
.op-promotion-config-summary {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 12px;
align-items: stretch;
border: 1px solid rgba(185, 28, 28, .13);
border-radius: 20px;
background: linear-gradient(135deg, #fff, #fff7f7);
padding: 12px;
}
.op-promotion-config-summary > div:first-child {
display: grid;
gap: 3px;
align-content: center;
}
.op-promotion-config-summary span,
.op-promotion-config-summary small {
color: rgba(15, 23, 42, .64);
font-size: .76rem;
font-weight: 750;
line-height: 1.25;
}
.op-promotion-config-summary > div:first-child > span {
letter-spacing: .08em;
text-transform: uppercase;
}
.op-promotion-config-summary strong {
color: #b91c1c;
font-size: 1.22rem;
line-height: 1;
}
.op-promotion-config-rules {
display: flex;
flex-wrap: wrap;
gap: .38rem;
align-content: center;
}
.op-promotion-config-rules span {
background: #fff7ed;
border-radius: 999px;
color: #7c2d12;
padding: .34rem .55rem;
}
.op-promotion-config-footer {
display: grid;
grid-template-columns: minmax(0, .45fr) minmax(0, 1fr);
gap: 10px;
padding: 14px 18px 18px;
border-top: 1px solid rgba(8, 29, 69, .08);
background: #fff;
box-shadow: 0 -12px 28px rgba(8, 29, 69, .06);
}
.op-promotion-config-footer .op-promotion-add-button {
width: 100%;
}
.op-promotion-config-modal .op-promotion-builder {
gap: 12px;
}
.op-promotion-config-modal .op-promotion-builder-group {
background: rgba(255, 255, 255, .92);
}
@media (max-width: 760px) {
.op-promotion-config-head {
grid-template-columns: 58px minmax(0, 1fr);
padding: 18px 62px 14px 16px;
}
.op-promotion-config-icon {
width: 58px;
height: 58px;
border-radius: 18px;
font-size: 2rem;
}
.op-promotion-config-body {
padding: 12px;
}
.op-promotion-config-summary,
.op-promotion-config-footer {
grid-template-columns: 1fr;
}
.op-promotion-config-footer {
padding: 12px;
}
}
/* PATCH 112 — Cartillas de promociones compactas */
.op-promotion-card {
min-height: 150px;
}
.op-promotion-card-body {
gap: .46rem;
padding: .82rem .92rem;
}
.op-promotion-card-head {
gap: .48rem;
}
.op-promotion-status {
max-width: 118px;
overflow: hidden;
text-overflow: ellipsis;
}
.op-promotion-card-price {
align-items: center;
display: flex;
min-height: 42px;
padding: .52rem .66rem;
}
.op-promotion-card-price strong {
font-size: 1.18rem;
}
.op-promotion-card-rules {
gap: .3rem;
}
.op-promotion-card-rules span {
font-size: .73rem;
padding: .26rem .46rem;
}
@media (max-width: 760px) {
.op-promotion-status {
max-width: 100%;
}
}
/* PATCH 107A — Constructor guiado de promociones */
.op-promo-admin-form {
display: grid;
gap: 18px;
}
.op-promo-builder-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border: 1px solid rgba(22, 163, 74, 0.22);
background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(255, 255, 255, 0.96));
}
.op-promo-builder-hero h2 {
margin: 0 0 6px;
font-size: 1.32rem;
color: var(--op-primary, #06183a);
}
.op-promo-builder-hero p {
margin: 0;
max-width: 760px;
color: rgba(15, 23, 42, 0.68);
line-height: 1.45;
}
.op-promo-help-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.op-promo-builder-card {
border: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255, 255, 255, 0.92);
}
.op-promo-builder-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.op-promo-builder-card-head h3 {
margin: 0 0 6px;
font-size: 1.16rem;
color: var(--op-primary, #06183a);
}
.op-promo-builder-pill {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 7px 11px;
background: rgba(22, 163, 74, 0.12);
color: #047857;
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.op-promo-component {
border: 1px solid rgba(15, 23, 42, 0.10);
background: linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
}
.op-promo-component-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.op-promo-component-head > div {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.op-promo-component-head strong {
color: var(--op-primary, #06183a);
font-size: 1rem;
}
.op-promo-component-head small {
width: 100%;
margin-left: 44px;
color: rgba(15, 23, 42, 0.56);
font-size: 0.78rem;
}
.op-promo-component-number {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--op-secondary, #b00000);
color: #fff;
font-weight: 900;
}
.op-promo-component-status {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 6px 10px;
background: rgba(148, 163, 184, 0.18);
color: rgba(15, 23, 42, 0.62);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.op-promo-component-status.is-ready {
background: rgba(22, 163, 74, 0.14);
color: #047857;
}
.op-promo-component-main {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.op-promo-filter-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.op-promo-filter-grid label small {
display: block;
margin-top: 6px;
color: rgba(15, 23, 42, 0.52);
font-size: 0.74rem;
line-height: 1.35;
}
.op-promo-filter-grid select[multiple] {
min-height: 144px;
}
.op-promo-component-summary {
margin-top: 12px;
border: 1px solid rgba(22, 163, 74, 0.22);
border-radius: 14px;
padding: 10px 12px;
background: rgba(22, 163, 74, 0.08);
color: #065f46;
font-size: 0.82rem;
line-height: 1.4;
}
.op-promo-admin-form.is-promo-bundle-mode .op-promo-simple-target-block {
opacity: 0.72;
}
.op-promo-admin-form option[hidden] {
display: none;
}
@media (max-width: 1100px) {
.op-promo-help-grid,
.op-promo-component-main,
.op-promo-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.op-promo-builder-hero,
.op-promo-builder-card-head,
.op-promo-component-head {
align-items: stretch;
flex-direction: column;
}
.op-promo-help-grid,
.op-promo-component-main,
.op-promo-filter-grid {
grid-template-columns: 1fr;
}
.op-promo-component-head small {
margin-left: 0;
}
}
/* PATCH 108 — Cancelar tickets vacíos desde Caja */
.op-empty-ticket-discard-btn {
white-space: nowrap;
}
.op-empty-ticket-discard-card {
border: 1px solid rgba(180, 35, 24, .18);
background: rgba(180, 35, 24, .06);
}
.op-empty-ticket-discard-card strong {
display: block;
color: var(--op-danger, #b42318);
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 6px;
}
.op-empty-ticket-discard-card p {
margin: 0 0 12px;
color: var(--op-muted, #65708a);
font-size: 13px;
line-height: 1.45;
}
/* PATCH 109 — Promociones múltiples y retiro agrupado */
.op-selected-promos {
margin: 12px 0;
padding: 12px;
border: 1px solid rgba(22, 163, 74, .18);
background: linear-gradient(135deg, rgba(240, 253, 244, .98), rgba(255, 255, 255, .98));
border-radius: 18px;
display: grid;
gap: 8px;
}
.op-selected-promos-head,
.op-selected-promo-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.op-selected-promos-head span {
font-size: .76rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: #065f46;
}
.op-selected-promos-head small {
padding: 4px 8px;
border-radius: 999px;
background: rgba(22, 163, 74, .12);
color: #047857;
font-weight: 800;
}
.op-selected-promo-card {
padding: 10px;
border: 1px solid rgba(22, 163, 74, .16);
border-radius: 14px;
background: rgba(255, 255, 255, .88);
}
.op-selected-promo-card strong {
display: block;
font-size: .84rem;
color: var(--op-primary, #07142f);
text-transform: uppercase;
}
.op-selected-promo-card small {
display: block;
margin-top: 3px;
color: #64748b;
font-size: .72rem;
line-height: 1.35;
}
.op-selected-promo-numbers {
min-width: 86px;
text-align: right;
}
.op-selected-promo-numbers b {
display: block;
color: #047857;
font-size: .88rem;
}
.op-selected-promo-remove {
border: 0;
border-radius: 999px;
padding: 8px 10px;
background: rgba(185, 28, 28, .10);
color: #991b1b;
font-size: .68rem;
font-weight: 900;
text-transform: uppercase;
cursor: pointer;
}
.op-selected-promo-remove:hover {
background: rgba(185, 28, 28, .18);
}
.op-order-promo-chip {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 4px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(22, 163, 74, .10);
color: #047857;
font-size: .67rem;
font-weight: 800;
text-transform: uppercase;
}
@media (max-width: 720px) {
.op-selected-promo-card {
align-items: flex-start;
flex-direction: column;
}
.op-selected-promo-numbers {
text-align: left;
}
}
/* PATCH 113 — Configurador inteligente de promociones POS */
.op-promotion-builder-title > div {
display: grid;
gap: 3px;
min-width: 0;
}
.op-promotion-builder-title small {
color: rgba(15, 23, 42, .58);
font-size: .74rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.28;
text-transform: none;
}
.op-promotion-builder-group.is-smart-compact,
.op-promotion-builder-group.is-smart-fixed {
gap: 12px;
padding: 14px;
}
.op-promotion-smart-picker {
display: grid;
gap: 9px;
}
.op-promotion-smart-choice {
align-items: center;
background: rgba(248, 250, 252, .96);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;
display: grid;
gap: 9px;
grid-template-columns: auto minmax(92px, .32fr) minmax(0, 1fr);
padding: 10px;
}
.op-promotion-smart-choice .op-promotion-choice-count {
grid-row: auto;
}
.op-promotion-smart-choice-label {
color: rgba(15, 23, 42, .62);
font-size: .70rem;
font-weight: 900;
letter-spacing: .055em;
text-transform: uppercase;
}
.op-promotion-smart-choice select {
width: 100%;
border: 1px solid rgba(15, 23, 42, .14);
border-radius: 12px;
padding: 10px 12px;
background: #fff;
color: var(--op-primary, #06183a);
font-size: .92rem;
font-weight: 850;
}
.op-promotion-smart-choice select:required:invalid {
color: rgba(15, 23, 42, .46);
}
.op-promotion-fixed-confirmation {
align-items: center;
background: linear-gradient(135deg, #fff, #f8fafc);
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 18px;
display: grid;
gap: 12px;
grid-template-columns: auto minmax(0, 1fr);
padding: 14px;
}
.op-promotion-confirmation-icon {
align-items: center;
background: #dcfce7;
border-radius: 999px;
color: #166534;
display: inline-flex;
font-weight: 950;
height: 34px;
justify-content: center;
width: 34px;
}
.op-promotion-fixed-confirmation div {
display: grid;
gap: 2px;
min-width: 0;
}
.op-promotion-fixed-confirmation span:not(.op-promotion-confirmation-icon) {
color: rgba(15, 23, 42, .58);
font-size: .70rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.op-promotion-fixed-confirmation strong {
color: var(--op-primary, #06183a);
font-size: 1rem;
line-height: 1.22;
}
@media (max-width: 720px) {
.op-promotion-smart-choice {
align-items: stretch;
grid-template-columns: auto minmax(0, 1fr);
}
.op-promotion-smart-choice select {
grid-column: 1 / -1;
}
}
/* PATCH 114 — Refinamiento visual de cartillas de promociones POS */
.op-promotion-card-head {
align-items: center;
}
.op-promotion-card h3 {
margin: 0;
}
.op-promotion-status-icon {
align-items: center;
display: inline-grid;
flex: 0 0 auto;
font-size: .82rem;
height: 30px;
justify-content: center;
letter-spacing: 0;
line-height: 1;
max-width: none;
overflow: visible;
padding: 0;
text-transform: none;
width: 30px;
}
.op-promotion-status-icon.tone-available {
background: #dcfce7;
border: 1px solid rgba(22, 101, 52, .14);
color: #166534;
box-shadow: 0 8px 18px rgba(22, 101, 52, .10);
}
.op-promotion-status-icon.tone-scheduled,
.op-promotion-status-icon.tone-day,
.op-promotion-status-icon.tone-time {
background: #fff7ed;
border: 1px solid rgba(154, 52, 18, .12);
color: #9a3412;
box-shadow: none;
}
.op-promotion-status-icon.tone-channel,
.op-promotion-status-icon.tone-expired {
background: #f8fafc;
border: 1px solid rgba(100, 116, 139, .16);
color: #64748b;
box-shadow: none;
}
.op-promotion-card-price {
justify-content: space-between;
gap: .62rem;
}
.op-promotion-card-price.has-action {
padding-right: .44rem;
}
.op-promotion-price-add-button {
align-items: center;
background: var(--op-secondary, #b00000);
border: 0;
border-radius: 999px;
box-shadow: 0 12px 24px rgba(176, 0, 0, .20);
color: #fff;
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
font-size: 1.48rem;
font-weight: 950;
height: 36px;
justify-content: center;
line-height: 1;
padding: 0 0 .08rem;
touch-action: manipulation;
transition: transform .16s ease, box-shadow .16s ease;
width: 36px;
}
.op-promotion-price-add-button:hover,
.op-promotion-price-add-button:focus-visible {
box-shadow: 0 16px 28px rgba(176, 0, 0, .26);
transform: translateY(-1px);
}
.op-promotion-price-add-button:focus-visible {
outline: 3px solid rgba(176, 0, 0, .18);
outline-offset: 3px;
}
@media (max-width: 760px) {
.op-promotion-status-icon {
height: 28px;
width: 28px;
}
.op-promotion-price-add-button {
height: 34px;
width: 34px;
}
}
/* PATCH 115 · Blindaje visual de stock en catálogo POS */
.op-catalog-compact-tile.is-stock-blocked {
border-color: rgba(148, 163, 184, .35);
background: #f8fafc;
box-shadow: none;
}
.op-catalog-compact-trigger[disabled],
.op-catalog-compact-trigger[aria-disabled="true"] {
cursor: not-allowed;
opacity: .72;
}
.op-catalog-compact-trigger[disabled]:hover,
.op-catalog-compact-trigger[aria-disabled="true"]:hover,
.op-catalog-compact-trigger[disabled]:focus-visible,
.op-catalog-compact-trigger[aria-disabled="true"]:focus-visible {
background: transparent;
}
.op-catalog-compact-trigger[disabled]:active,
.op-catalog-compact-trigger[aria-disabled="true"]:active {
transform: none;
}
.op-catalog-stock-badge {
min-width: 0;
min-height: 34px;
display: inline-grid;
place-items: center;
padding: 0 9px;
border-radius: 12px;
background: rgba(148, 163, 184, .18);
color: #64748b;
font-size: .66rem;
font-weight: 900;
line-height: 1;
text-align: center;
letter-spacing: .02em;
}
.op-product-quick-option.is-stock-blocked {
grid-template-columns: minmax(0, 1fr) 118px;
background: #f1f5f9;
opacity: .82;
}
.op-product-stock-empty {
min-height: 46px;
display: grid;
place-items: center;
padding: 0 12px;
border-radius: 15px;
background: rgba(148, 163, 184, .18);
color: #64748b;
font-size: .74rem;
font-weight: 950;
letter-spacing: .03em;
text-align: center;
}
.op-pizza-size-button.is-stock-blocked {
cursor: not-allowed;
opacity: .6;
box-shadow: none;
}
.op-pizza-size-button.is-stock-blocked:active {
transform: none;
}
@media (max-width: 640px) {
.op-catalog-stock-badge {
min-height: 32px;
padding: 0 7px;
font-size: .58rem;
}
.op-product-quick-option.is-stock-blocked {
grid-template-columns: minmax(0, 1fr);
}
}
/* PATCH 118 — Usuarios separados por jerarquía y creación en modal */
.op-users-admin-card {
display: grid;
gap: 22px;
}
.op-users-page-head {
align-items: flex-start;
}
.op-user-create-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.op-user-group-grid {
display: grid;
gap: 20px;
}
.op-user-group-panel {
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 24px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 18px 40px rgba(20, 33, 61, .06);
overflow: hidden;
}
.op-user-group-panel-operational {
border-color: rgba(255, 107, 0, .14);
}
.op-user-group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid rgba(20, 33, 61, .08);
background: linear-gradient(135deg, rgba(6, 37, 91, .045), rgba(255, 255, 255, .96));
}
.op-user-group-head h3 {
margin: 4px 0;
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 820;
color: var(--op-text);
}
.op-user-group-head span:not(.op-user-type-pill) {
color: var(--op-muted);
font-weight: 700;
font-size: .86rem;
}
.op-user-type-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
min-height: 34px;
padding: 7px 12px;
border-radius: 999px;
font-size: .78rem;
font-weight: 900;
letter-spacing: .06em;
}
.op-user-type-admin {
background: rgba(6, 37, 91, .09);
color: var(--op-primary);
}
.op-user-type-operational {
background: rgba(255, 107, 0, .14);
color: var(--op-secondary);
}
.op-user-table th:first-child,
.op-user-table td:first-child {
min-width: 210px;
}
.op-user-create-modal-card {
width: min(860px, 100%);
max-height: min(92vh, 820px);
overflow-y: auto;
}
.op-user-create-form {
margin-top: 18px;
}
.op-user-branch-box {
display: grid;
gap: 8px;
padding: 16px;
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 20px;
background: rgba(6, 37, 91, .035);
}
.op-user-branch-box h3 {
margin: 2px 0 0;
font-size: 1rem;
color: var(--op-text);
}
.op-user-branch-box p {
margin: 0;
color: var(--op-muted);
font-size: .88rem;
line-height: 1.4;
}
.op-user-pin-reveal-card small {
color: var(--op-muted);
font-weight: 700;
}
.op-user-create-modal .op-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-end;
align-items: center;
margin-top: 6px;
}
@media (max-width: 860px) {
.op-user-create-actions,
.op-user-create-modal .op-modal-actions {
justify-content: flex-start;
}
.op-user-group-head {
align-items: flex-start;
flex-direction: column;
}
}
/* PATCH 119 — Usuarios operativos agrupados por sucursal */
.op-user-operational-body {
display: grid;
gap: 18px;
padding: 18px;
}
.op-user-multibranch-summary {
display: grid;
grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
gap: 16px;
align-items: start;
padding: 16px;
border: 1px solid rgba(255, 107, 0, .18);
border-radius: 20px;
background: linear-gradient(135deg, rgba(255, 107, 0, .08), rgba(255, 255, 255, .92));
}
.op-user-multibranch-summary h4,
.op-user-branch-head h4 {
margin: 2px 0;
color: var(--op-text);
font-size: 1.02rem;
font-weight: 900;
}
.op-user-multibranch-summary span,
.op-user-branch-head span:not(.op-status) {
color: var(--op-muted);
font-size: .82rem;
font-weight: 740;
}
.op-user-multibranch-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.op-user-multibranch-chip {
display: inline-grid;
gap: 3px;
padding: 9px 12px;
border-radius: 16px;
border: 1px solid rgba(20, 33, 61, .08);
background: rgba(255, 255, 255, .86);
box-shadow: 0 10px 24px rgba(20, 33, 61, .05);
}
.op-user-multibranch-chip strong {
color: var(--op-text);
font-size: .86rem;
font-weight: 920;
}
.op-user-multibranch-chip small {
color: var(--op-muted);
font-size: .74rem;
font-weight: 760;
}
.op-user-branch-list {
display: grid;
gap: 14px;
}
.op-user-branch-panel {
overflow: hidden;
border: 1px solid rgba(20, 33, 61, .08);
border-radius: 20px;
background: rgba(255, 255, 255, .9);
}
.op-user-branch-panel-warning {
border-color: rgba(185, 28, 28, .18);
background: rgba(254, 242, 242, .72);
}
.op-user-branch-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 15px 16px;
border-bottom: 1px solid rgba(20, 33, 61, .07);
background: rgba(6, 37, 91, .035);
}
.op-branch-role-counts {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.op-branch-role-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 28px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(16, 185, 129, .13);
color: #047857;
font-size: .72rem;
font-weight: 950;
letter-spacing: .04em;
}
.op-branch-role-count.is-empty {
background: rgba(148, 163, 184, .16);
color: #64748b;
}
.op-user-empty-branch-note {
padding: 18px;
color: var(--op-muted);
font-size: .9rem;
font-weight: 760;
}
.op-user-branch-table th:first-child,
.op-user-branch-table td:first-child {
min-width: 190px;
}
.op-user-scope-stack {
display: grid;
gap: 8px;
}
.op-user-table tr.is-multibranch-user td {
background: rgba(255, 251, 235, .36);
}
.op-status-warning {
background: rgba(245, 158, 11, .16);
color: #92400e;
}
@media (max-width: 920px) {
.op-user-multibranch-summary {
grid-template-columns: 1fr;
}
.op-user-branch-head {
align-items: flex-start;
flex-direction: column;
}
.op-branch-role-counts {
justify-content: flex-start;
}
}
/* PATCH 120 · purga developer-only de usuarios */
.op-btn-danger-outline {
border-color: rgba(180, 35, 24, .24);
background: rgba(180, 35, 24, .045);
color: var(--op-danger);
}
.op-btn-danger-outline:hover:not(:disabled) {
background: rgba(180, 35, 24, .1);
}
.op-btn-danger-outline:disabled {
opacity: .48;
cursor: not-allowed;
}
.op-user-purge-modal-card {
max-width: 620px;
}
.op-user-purge-target {
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid rgba(180, 35, 24, .18);
border-radius: 18px;
background: rgba(180, 35, 24, .045);
margin-bottom: 14px;
}
.op-user-purge-target strong {
color: var(--op-text);
font-size: 1.05rem;
}
.op-user-purge-target span {
color: var(--op-muted);
font-weight: 750;
font-size: .86rem;
}
.op-user-purge-warning {
margin-bottom: 14px;
}
.op-user-purge-form {
display: grid;
gap: 14px;
}
.op-user-purge-form input {
text-transform: uppercase;
}
.op-user-purge-blockers {
margin-bottom: 14px;
}
/* PATCH 121 — Promociones con componentes dinámicos y validaciones seguras */
.op-promo-components-list {
display: grid;
gap: 12px;
}
.op-promo-component-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.op-btn-xs {
border-radius: 999px;
font-size: .70rem;
min-height: 0;
padding: 6px 9px;
}
.op-promo-component-remove {
color: rgba(180, 35, 24, .92);
}
.op-promo-component-toolbar {
align-items: center;
border: 1px dashed rgba(15, 23, 42, .18);
border-radius: 18px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
margin-top: 14px;
padding: 12px;
background: rgba(248, 250, 252, .72);
}
.op-promo-component-toolbar span {
color: rgba(15, 23, 42, .58);
font-size: .78rem;
font-weight: 800;
line-height: 1.35;
}
@media (max-width: 720px) {
.op-promo-component-actions,
.op-promo-component-toolbar {
align-items: stretch;
flex-direction: column;
}
}
/* PATCH 123 · Aviso compacto cuando una promo vigente necesita reparación de stock/configuración */
.op-promotion-price-note {
align-self: center;
background: #fff7ed;
border: 1px solid rgba(249, 115, 22, .20);
border-radius: 999px;
color: #9a3412;
display: inline-flex;
font-size: .62rem;
font-weight: 900;
letter-spacing: .03em;
line-height: 1.15;
max-width: 132px;
padding: .24rem .42rem;
text-align: center;
text-transform: uppercase;
}
/* PATCH 124 · Puente MOZO DELIVERISTA */
.op-station-top-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.op-station-top-actions form,
.op-station-bridge-btn {
margin: 0;
}
.op-station-bridge-btn {
white-space: nowrap;
}
@media (max-width: 760px) {
.op-station-top-actions {
width: 100%;
justify-content: stretch;
}
.op-station-top-actions form,
.op-station-top-actions .op-btn {
width: 100%;
}
}
.op-operator-pin-card-waiter-delivery { border-top-color: #7c3aed; }
.op-operator-role-waiter-delivery { background: linear-gradient(135deg, #2563eb, #f97316); }
/* PATCH 128 · Entrega física obligatoria antes de liberar mesa */
.op-table-bulk-delivery-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
gap: 14px;
align-items: center;
padding: 14px;
border: 1px solid rgba(18, 128, 92, .22);
border-radius: 18px;
background: rgba(18, 128, 92, .06);
}
.op-table-bulk-delivery-card > div {
display: grid;
gap: 3px;
min-width: 0;
}
.op-table-bulk-delivery-card small {
color: #166534;
font-size: .7rem;
font-weight: 750;
letter-spacing: .05em;
text-transform: uppercase;
}
.op-table-bulk-delivery-card strong {
color: var(--op-text);
font-size: .98rem;
font-weight: 720;
}
.op-table-bulk-delivery-card span {
color: var(--op-muted);
font-size: .78rem;
line-height: 1.35;
}
.op-table-bulk-delivery-card form {
margin: 0;
}
@media (max-width: 760px) {
.op-table-bulk-delivery-card {
grid-template-columns: 1fr;
}
}
/* PATCH 127 · Notas separadas para cocina y entrega */
[data-op-uppercase] {
text-transform: uppercase;
}
.op-order-notes-editor {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid rgba(8, 29, 69, .12);
border-radius: 18px;
background: rgba(248, 250, 252, .82);
}
.op-order-notes-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.op-order-notes-editor-head > div {
display: grid;
gap: 2px;
}
.op-order-notes-editor-head small,
.op-order-notes-editor-head > span {
color: var(--op-muted);
font-size: .68rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.op-order-notes-editor-head strong {
color: var(--op-text);
font-size: .94rem;
}
.op-order-notes-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.op-order-note-field {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
margin: 0;
padding: 12px;
border: 1px solid rgba(8, 29, 69, .11);
border-radius: 16px;
background: #fff;
}
.op-order-note-field.is-kitchen {
border-color: rgba(234, 88, 12, .22);
background: rgba(255, 247, 237, .74);
}
.op-order-note-field.is-delivery {
border-color: rgba(37, 99, 235, .20);
background: rgba(239, 246, 255, .72);
}
.op-order-note-field-title {
display: grid;
gap: 2px;
}
.op-order-note-field-title strong {
color: var(--op-text);
font-size: .78rem;
letter-spacing: .025em;
}
.op-order-note-field-title small {
color: var(--op-muted);
font-size: .7rem;
font-weight: 650;
line-height: 1.3;
}
.op-order-note-field textarea {
width: 100%;
min-height: 76px;
resize: vertical;
border: 1px solid rgba(8, 29, 69, .14);
border-radius: 12px;
background: #fff;
color: var(--op-text);
font: inherit;
font-size: .82rem;
font-weight: 700;
line-height: 1.35;
padding: 10px 11px;
}
.op-order-note-field textarea:focus {
outline: 0;
border-color: rgba(255, 107, 0, .55);
box-shadow: 0 0 0 3px rgba(255, 107, 0, .10);
}
/* PATCH 130A · Estado de autoguardado de notas */
.op-order-notes-save-state {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 9px 11px;
border: 1px solid rgba(8, 29, 69, .11);
border-radius: 13px;
background: rgba(248, 250, 252, .86);
transition: border-color .16s ease, background .16s ease;
}
.op-order-notes-save-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background: #16a34a;
box-shadow: 0 0 0 4px rgba(22, 163, 74, .10);
}
.op-order-notes-save-copy {
display: grid;
gap: 1px;
min-width: 0;
}
.op-order-notes-save-copy strong {
color: var(--op-text);
font-size: .68rem;
font-weight: 900;
letter-spacing: .045em;
text-transform: uppercase;
}
.op-order-notes-save-copy small {
color: var(--op-muted);
font-size: .67rem;
font-weight: 650;
line-height: 1.3;
}
.op-order-notes-save-state.is-pending {
border-color: rgba(217, 119, 6, .28);
background: rgba(255, 251, 235, .92);
}
.op-order-notes-save-state.is-pending .op-order-notes-save-dot {
background: #d97706;
box-shadow: 0 0 0 4px rgba(217, 119, 6, .11);
}
.op-order-notes-save-state.is-saving {
border-color: rgba(37, 99, 235, .25);
background: rgba(239, 246, 255, .92);
}
.op-order-notes-save-state.is-saving .op-order-notes-save-dot {
background: #2563eb;
box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
animation: op-order-notes-saving-pulse 1s ease-in-out infinite;
}
.op-order-notes-save-state.is-error {
border-color: rgba(220, 38, 38, .28);
background: rgba(254, 242, 242, .94);
}
.op-order-notes-save-state.is-error .op-order-notes-save-dot {
background: #dc2626;
box-shadow: 0 0 0 4px rgba(220, 38, 38, .10);
}
.op-order-notes-editor[aria-busy="true"] .op-order-note-field textarea {
border-color: rgba(37, 99, 235, .24);
}
@keyframes op-order-notes-saving-pulse {
0%, 100% { opacity: .55; transform: scale(.86); }
50% { opacity: 1; transform: scale(1); }
}
.op-order-notes-display {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin: 10px 0;
}
.op-order-notes-display.is-compact {
grid-template-columns: 1fr;
margin: 8px 0;
}
.op-order-note-display {
display: grid;
gap: 3px;
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(8, 29, 69, .11);
border-radius: 13px;
background: rgba(248, 250, 252, .82);
}
.op-order-note-display.is-kitchen {
border-color: rgba(234, 88, 12, .22);
background: rgba(255, 247, 237, .78);
}
.op-order-note-display.is-delivery {
border-color: rgba(37, 99, 235, .20);
background: rgba(239, 246, 255, .78);
}
.op-order-note-display small {
color: var(--op-muted);
font-size: .62rem;
font-weight: 850;
letter-spacing: .045em;
text-transform: uppercase;
}
.op-order-note-display strong {
color: var(--op-text);
font-size: .78rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.op-order-note-display.is-queue-note {
margin: 0;
}
.op-delivery-instruction-note {
display: grid;
gap: 3px;
margin-top: 9px;
padding: 9px 10px;
border: 1px solid rgba(37, 99, 235, .20);
border-radius: 12px;
background: rgba(239, 246, 255, .82);
}
.op-delivery-instruction-note span {
color: #1d4ed8;
font-size: .62rem;
font-weight: 850;
letter-spacing: .045em;
text-transform: uppercase;
}
.op-delivery-instruction-note strong {
color: var(--op-text);
font-size: .78rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
mark.op-delivery-instruction-note.is-inline {
display: block;
width: fit-content;
max-width: 100%;
margin: 5px 0 0;
padding: 5px 8px;
color: #1e3a8a;
font-size: .7rem;
font-weight: 800;
line-height: 1.3;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.op-order-notes-grid,
.op-order-notes-display {
grid-template-columns: 1fr;
}
.op-order-notes-editor-head {
align-items: flex-start;
flex-direction: column;
}
}
/* PATCH 129 — precio premium configurable y composición válida de pizzas mixtas */
.op-variant-grid {
grid-template-columns: 1.15fr 1fr .78fr .68fr .68fr .58fr .58fr .65fr;
}
.op-field-label {
display: block;
margin-bottom: 8px;
color: var(--op-muted);
font-size: .92rem;
font-weight: 650;
}
.op-help-text {
margin: 0;
color: var(--op-muted);
font-size: .82rem;
line-height: 1.45;
}
.op-alert-info {
background: rgba(37, 99, 235, .10);
color: #1e3a8a;
}
.op-mixed-price-reference-toggle {
max-width: 760px;
}
.op-pizza-composition-button[hidden] {
display: none !important;
}
.op-pizza-preview em[data-pizza-price-note] {
display: inline-flex;
width: fit-content;
margin-top: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 103, 0, .11);
color: #c2410c;
font-size: .65rem;
font-style: normal;
font-weight: 950;
letter-spacing: .045em;
text-transform: uppercase;
}
.op-pizza-preview em[data-pizza-price-note][hidden] {
display: none !important;
}
@media (max-width: 1100px) {
.op-variant-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.op-variant-grid-head {
display: none;
}
}
@media (max-width: 680px) {
.op-variant-grid {
grid-template-columns: 1fr;
}
}
/* PATCH 130 · Pedidos standalone: productos primero, datos antes de enviar */
.op-cashier-channel-start {
min-width: 0;
margin: 0;
}
.op-cashier-channel-start button {
width: 100%;
min-width: 0;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 8px 9px;
border-radius: 15px;
border: 1px solid rgba(20,33,61,.07);
background: rgba(6,37,91,.045);
color: var(--op-text);
font: inherit;
font-size: .9rem;
font-weight: 650;
line-height: 1;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.op-cashier-channel-start button:hover,
.op-cashier-channel-start button:focus-visible {
border-color: rgba(180,35,24,.22);
background: rgba(180,35,24,.055);
transform: translateY(-1px);
outline: none;
}
.op-cashier-channel-start.is-takeaway .op-cashier-channel-icon {
background: rgba(255,107,0,.13);
color: #9b4d00;
}
.op-cashier-channel-start.is-pickup .op-cashier-channel-icon {
background: rgba(18,128,92,.12);
color: #12684e;
}
.op-cashier-channel-start.is-delivery .op-cashier-channel-icon {
background: rgba(6,87,184,.12);
color: #064f9b;
}
.op-products-first-start-card {
display: grid;
gap: 18px;
max-width: 760px;
margin-inline: auto;
}
.op-products-first-start-head {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(180,35,24,.07), rgba(255,255,255,.98));
border: 1px solid rgba(180,35,24,.13);
}
.op-products-first-start-head > span {
flex: 0 0 auto;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(180,35,24,.10);
font-size: 1.75rem;
}
.op-products-first-start-head h2 {
margin: 0 0 7px;
color: var(--op-text);
font-size: clamp(1.35rem, 2.6vw, 1.9rem);
line-height: 1;
}
.op-products-first-start-head p:last-child,
.op-products-first-rule {
margin: 0;
color: var(--op-muted);
font-weight: 650;
line-height: 1.45;
}
.op-products-first-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.op-products-first-steps li {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 17px;
background: rgba(248,250,252,.96);
border: 1px solid rgba(20,33,61,.08);
color: var(--op-text);
font-size: .84rem;
font-weight: 740;
line-height: 1.25;
}
.op-products-first-steps b {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--op-accent, #b42318);
color: #fff;
font-size: .8rem;
}
.op-products-first-rule {
display: block;
text-align: center;
}
.op-standalone-details-editor {
scroll-margin-top: 16px;
gap: 13px !important;
border: 1px solid rgba(6,87,184,.15) !important;
background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(239,246,255,.74)) !important;
}
.op-standalone-details-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.op-standalone-details-head > div {
min-width: 0;
display: grid;
gap: 3px;
}
.op-standalone-details-head small {
color: #0657b8;
font-size: .7rem;
font-weight: 900;
letter-spacing: .065em;
}
.op-standalone-details-head strong {
color: var(--op-text);
font-size: .98rem;
line-height: 1.15;
}
.op-standalone-details-chip {
display: inline-flex;
width: fit-content;
align-items: center;
justify-content: center;
padding: 6px 9px;
border-radius: 999px;
font-size: .66rem;
font-weight: 950;
letter-spacing: .045em;
line-height: 1;
white-space: nowrap;
}
.op-standalone-details-chip.is-complete {
color: #075e45;
background: rgba(18,128,92,.12);
border: 1px solid rgba(18,128,92,.18);
}
.op-standalone-details-chip.is-pending {
color: #9f1239;
background: rgba(180,35,24,.10);
border: 1px solid rgba(180,35,24,.16);
}
.op-standalone-details-chip.is-provisional {
margin-top: 5px;
color: #92400e;
background: rgba(245,158,11,.14);
border: 1px solid rgba(245,158,11,.24);
}
.op-standalone-details-blockers,
.op-standalone-details-mini-blockers {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.op-standalone-details-blockers span,
.op-standalone-details-mini-blockers span {
display: inline-flex;
padding: 5px 8px;
border-radius: 999px;
color: #9f1239;
background: rgba(180,35,24,.075);
border: 1px solid rgba(180,35,24,.12);
font-size: .65rem;
font-weight: 900;
letter-spacing: .025em;
}
.op-standalone-details-mini-blockers {
margin-top: 6px;
}
.op-standalone-details-ready-copy,
.op-standalone-details-footnote {
margin: 0;
color: var(--op-muted);
font-size: .72rem;
font-weight: 680;
line-height: 1.4;
}
.op-standalone-details-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.op-standalone-details-grid > :first-child {
grid-column: 1 / -1;
}
.op-standalone-delivery-grid > :first-child {
grid-column: 1 / -1;
}
.op-standalone-detail-field {
min-width: 0;
display: grid;
gap: 6px;
color: var(--op-text);
font-size: .78rem;
font-weight: 820;
}
.op-standalone-detail-field > span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.op-standalone-detail-field em {
color: #6b7280;
font-size: .57rem;
font-style: normal;
font-weight: 950;
letter-spacing: .045em;
}
.op-standalone-detail-field input,
.op-standalone-detail-field select,
.op-draft-discard-card input {
width: 100%;
min-width: 0;
min-height: 43px;
padding: 10px 11px;
border-radius: 13px;
border: 1px solid rgba(20,33,61,.14);
background: #fff;
color: var(--op-text);
font: inherit;
font-size: .86rem;
font-weight: 680;
outline: none;
}
.op-standalone-detail-field input:focus,
.op-standalone-detail-field select:focus,
.op-draft-discard-card input:focus {
border-color: rgba(6,87,184,.46);
box-shadow: 0 0 0 3px rgba(6,87,184,.09);
}
.op-standalone-detail-field small {
color: var(--op-muted);
font-size: .65rem;
font-weight: 640;
line-height: 1.3;
}
.op-standalone-details-editor .op-customer-lookup-panel {
min-height: 58px;
padding: 10px;
border-radius: 14px;
font-size: .74rem;
}
.op-comanda-account-box.is-provisional {
border-color: rgba(245,158,11,.30);
background: rgba(255,251,235,.92);
}
.op-standalone-total-warning {
display: grid;
gap: 3px;
padding: 10px 12px;
border-radius: 14px;
color: #92400e;
background: rgba(245,158,11,.12);
border: 1px solid rgba(245,158,11,.22);
}
.op-standalone-total-warning strong {
font-size: .7rem;
font-weight: 950;
letter-spacing: .045em;
}
.op-standalone-total-warning span {
font-size: .74rem;
font-weight: 690;
line-height: 1.3;
}
.op-standalone-action-blocked {
gap: 8px !important;
background: rgba(255,247,237,.96) !important;
border-color: rgba(234,88,12,.18) !important;
}
.op-standalone-action-blocked > span {
color: #c2410c;
font-size: .67rem;
font-weight: 950;
letter-spacing: .05em;
}
.op-standalone-action-blocked > strong {
color: var(--op-text);
font-size: .88rem;
line-height: 1.25;
}
.op-standalone-action-blocked > div {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.op-standalone-action-blocked em {
padding: 4px 7px;
border-radius: 999px;
color: #9a3412;
background: rgba(234,88,12,.09);
font-size: .62rem;
font-style: normal;
font-weight: 880;
}
.op-standalone-action-blocked.is-payment {
background: rgba(239,246,255,.96) !important;
border-color: rgba(6,87,184,.16) !important;
}
.op-standalone-action-blocked.is-payment > span {
color: #0657b8;
}
.op-draft-discard-card {
border-style: dashed !important;
}
.op-draft-discard-card label {
display: grid;
gap: 6px;
color: var(--op-muted);
font-size: .72rem;
font-weight: 760;
}
.op-btn-disabled-soft {
opacity: .84;
}
@media (max-width: 760px) {
.op-products-first-steps,
.op-standalone-details-grid {
grid-template-columns: 1fr;
}
.op-products-first-start-head,
.op-standalone-details-head {
align-items: flex-start;
flex-direction: column;
}
.op-cashier-channel-start button {
min-height: 48px;
}
}
/* PATCH 131 · capacidad opcional del mozo para Para Llevar / Recojo */
.op-waiter-standalone-capability {
align-items: flex-start;
border: 1px solid var(--op-border, #d9dee8);
border-radius: 14px;
gap: 12px;
margin-top: 14px;
padding: 14px 16px;
}
.op-waiter-standalone-capability span {
display: grid;
gap: 4px;
}
.op-waiter-standalone-capability small {
color: var(--op-muted, #667085);
line-height: 1.35;
}
.op-user-channel-capability-chip {
display: inline-flex;
margin-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
.op-waiter-standalone-comanda {
min-width: 0;
}
.op-waiter-channel-screen {
display: grid;
gap: 20px;
min-height: 100%;
}
.op-waiter-channel-top {
align-items: flex-start;
}
.op-waiter-channel-subtitle {
color: var(--op-muted, #667085);
margin: 4px 0 0;
}
.op-waiter-channel-start-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-waiter-channel-start-card,
.op-waiter-channel-start-card button {
min-width: 0;
}
.op-waiter-channel-start-card button {
align-items: center;
background: var(--op-surface, #fff);
border: 1px solid var(--op-border, #d9dee8);
border-radius: 18px;
cursor: pointer;
display: grid;
gap: 4px 12px;
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 116px;
padding: 18px;
text-align: left;
width: 100%;
}
.op-waiter-channel-start-card button:hover,
.op-waiter-channel-start-card button:focus-visible {
border-color: var(--op-primary, #a71918);
box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
transform: translateY(-1px);
}
.op-waiter-channel-start-card button > span:not(.op-waiter-channel-start-icon) {
display: grid;
gap: 3px;
min-width: 0;
}
.op-waiter-channel-start-card small,
.op-waiter-channel-start-card em {
color: var(--op-muted, #667085);
font-style: normal;
}
.op-waiter-channel-start-card strong {
font-size: 1.08rem;
letter-spacing: .035em;
}
.op-waiter-channel-start-card b {
align-items: center;
background: var(--op-surface-soft, #f7f8fa);
border-radius: 999px;
display: inline-flex;
font-size: 1.35rem;
height: 38px;
justify-content: center;
width: 38px;
}
.op-waiter-channel-start-icon {
font-size: 2rem;
}
.op-waiter-channel-active-panel {
background: var(--op-surface-soft, #f7f8fa);
border: 1px solid var(--op-border, #d9dee8);
border-radius: 20px;
padding: 18px;
}
.op-waiter-channel-panel-head {
align-items: end;
display: flex;
gap: 14px;
justify-content: space-between;
margin-bottom: 16px;
}
.op-waiter-channel-panel-head h2,
.op-waiter-channel-panel-head p {
margin: 0;
}
.op-waiter-channel-panel-head > span {
align-items: center;
background: var(--op-surface, #fff);
border: 1px solid var(--op-border, #d9dee8);
border-radius: 999px;
display: inline-flex;
font-weight: 900;
height: 34px;
justify-content: center;
min-width: 34px;
padding: 0 10px;
}
/* PATCH 131A · interfaz legible de pedidos del Mozo */
.op-waiter-channel-order-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(420px, 560px));
justify-content: start;
}
.op-waiter-channel-order-card {
align-content: start;
background: var(--op-surface, #fff);
border: 1px solid var(--op-border, #d9dee8);
border-radius: 18px;
display: grid;
gap: 13px;
min-width: 0;
padding: 18px;
}
.op-waiter-channel-order-card.is-draft {
border-left: 5px solid var(--op-warning, #d97706);
}
.op-waiter-channel-order-card.is-sent {
border-left: 5px solid var(--op-success, #16855b);
}
.op-waiter-channel-order-card > header {
align-items: start;
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr) auto;
}
.op-waiter-channel-order-card > footer {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.op-waiter-channel-order-card > header > div {
min-width: 0;
}
.op-waiter-channel-order-card h3,
.op-waiter-channel-order-card p {
margin: 0;
}
.op-waiter-channel-order-card h3 {
font-size: 1.02rem;
line-height: 1.2;
margin-top: 7px;
overflow-wrap: anywhere;
}
.op-waiter-channel-order-card > header p {
color: var(--op-muted, #667085);
line-height: 1.35;
margin-top: 5px;
}
.op-waiter-channel-order-total {
font-size: 1.12rem;
line-height: 1;
padding-top: 4px;
white-space: nowrap;
}
.op-waiter-channel-status-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.op-waiter-channel-item-list {
border-bottom: 1px dashed var(--op-border, #d9dee8);
border-top: 1px dashed var(--op-border, #d9dee8);
display: grid;
gap: 8px;
padding: 10px 0;
}
.op-waiter-channel-item-list > div {
align-items: start;
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr) auto;
}
.op-waiter-channel-item-list > div span {
display: -webkit-box;
line-height: 1.3;
min-width: 0;
overflow: hidden;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.op-waiter-channel-item-list > div strong {
white-space: nowrap;
}
.op-waiter-channel-item-list p,
.op-waiter-channel-item-list small {
color: var(--op-muted, #667085);
margin: 0;
}
.op-waiter-channel-empty {
align-items: center;
background: var(--op-surface, #fff);
border: 1px dashed var(--op-border, #d9dee8);
border-radius: 16px;
display: grid;
gap: 6px;
grid-column: 1 / -1;
justify-items: center;
min-height: 210px;
padding: 28px;
text-align: center;
}
.op-waiter-channel-empty > span {
font-size: 2rem;
}
.op-waiter-channel-empty h3,
.op-waiter-channel-empty p {
margin: 0;
}
.op-waiter-channel-empty p {
color: var(--op-muted, #667085);
}
.op-waiter-channel-handoff-card,
.op-waiter-cashier-handoff-card,
.op-waiter-channel-sent-state,
.op-waiter-order-sent-state {
border-color: rgba(22, 133, 91, .35);
}
.op-waiter-channel-handoff-card > span,
.op-waiter-cashier-handoff-card > span,
.op-waiter-draft-chip {
color: var(--op-warning, #b45309);
font-size: .72rem;
font-weight: 900;
letter-spacing: .06em;
}
.op-waiter-channel-handoff-card p,
.op-waiter-cashier-handoff-card p {
color: var(--op-muted, #667085);
margin: 0;
}
.op-waiter-draft-chip {
background: rgba(217, 119, 6, .12);
border-radius: 999px;
display: inline-flex;
margin-top: 6px;
padding: 5px 9px;
}
.op-waiter-draft-owner {
color: var(--op-muted, #667085);
display: block;
font-weight: 700;
margin-top: 4px;
}
.op-waiter-channel-handoff-card.is-cashier-readonly {
background: rgba(217, 119, 6, .07);
}
@media (max-width: 820px) {
.op-waiter-channel-start-grid,
.op-waiter-channel-order-grid {
grid-template-columns: 1fr;
}
.op-waiter-channel-panel-head,
.op-waiter-channel-order-card > footer {
align-items: flex-start;
flex-direction: column;
}
.op-waiter-channel-order-card > footer .op-btn {
width: 100%;
}
}
@media (max-width: 520px) {
.op-waiter-channel-order-card > header {
grid-template-columns: 1fr;
}
.op-waiter-channel-order-total {
font-size: 1.2rem;
padding-top: 0;
}
}
/* PATCH 133 · Recibo único y cobranza multimedio */
.op-payment-mini-list-v3 em {
grid-column: 1 / -1;
color: var(--op-muted);
font-size: .72rem;
font-style: normal;
font-weight: 650;
overflow-wrap: anywhere;
}
.op-payment-receipt-note {
margin: 2px 0 8px;
font-size: .76rem;
}
/* PATCH 133A · Caja adaptable, Recientes en modal y estado de inventario compacto */
.op-cashier-topbar {
grid-template-areas: "title channels right";
grid-template-columns: minmax(145px, auto) minmax(520px, 1fr) auto;
gap: clamp(10px, 1vw, 18px);
}
.op-cashier-title-block { grid-area: title; }
.op-cashier-channel-strip {
grid-area: channels;
grid-template-columns: repeat(5, minmax(105px, 1fr));
gap: clamp(8px, .75vw, 14px);
align-items: stretch;
}
.op-cashier-channel-strip > a,
.op-cashier-channel-strip > form,
.op-cashier-channel-strip > button {
width: 100%;
min-width: 0;
}
.op-cashier-channel-recent {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 15px;
border: 1px solid rgba(20, 33, 61, .10);
background: rgba(20, 33, 61, .055);
color: var(--op-text);
font: inherit;
font-size: .9rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.op-cashier-channel-recent:hover,
.op-cashier-channel-recent:focus-visible {
border-color: rgba(6, 87, 184, .22);
background: rgba(6, 87, 184, .07);
transform: translateY(-1px);
outline: none;
}
.op-cashier-topbar-right {
grid-area: right;
min-width: 0;
flex-wrap: nowrap;
}
.op-cashier-summary-strip {
min-width: 0;
display: grid;
grid-template-columns: repeat(4, minmax(104px, 1fr));
gap: 7px;
}
.op-cashier-summary-chip {
min-width: 104px;
min-height: 44px;
display: grid;
align-content: center;
gap: 2px;
padding: 7px 10px;
border-radius: 15px;
border: 1px solid rgba(20, 33, 61, .08);
background: rgba(20, 33, 61, .045);
}
.op-cashier-summary-chip span {
color: var(--op-muted);
font-size: .65rem;
font-weight: 700;
letter-spacing: .045em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.op-cashier-summary-chip strong {
color: var(--op-text);
font-size: .93rem;
font-weight: 760;
line-height: 1.08;
white-space: nowrap;
}
.op-cashier-summary-chip.is-due {
border-color: rgba(180, 35, 24, .13);
background: rgba(180, 35, 24, .07);
}
.op-cashier-summary-chip.is-cash {
border-color: rgba(18, 128, 92, .15);
background: rgba(18, 128, 92, .08);
}
.op-cashier-summary-chip.is-other {
border-color: rgba(6, 87, 184, .15);
background: rgba(6, 87, 184, .075);
}
.op-cashier-summary-chip.is-total {
border-color: rgba(20, 33, 61, .16);
background: rgba(20, 33, 61, .085);
}
.op-cashier-summary-chip.is-inactive {
opacity: .58;
}
.op-cashier-layout-v3 {
display: block;
grid-template-columns: 1fr;
}
.op-cashier-main-panel {
width: 100%;
}
.op-cashier-order-feed {
grid-template-columns: repeat(auto-fit, minmax(355px, 1fr));
gap: clamp(12px, 1vw, 18px);
}
.op-cashier-recent-panel-v3 {
display: none !important;
}
.op-cashier-recent-modal {
z-index: 126;
}
.op-cashier-recent-modal-card {
width: min(760px, calc(100vw - 28px));
max-height: min(88vh, 820px);
overflow: auto;
padding: 20px;
border-radius: 28px;
}
.op-cashier-recent-modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
padding-right: 34px;
}
.op-cashier-recent-modal-head h2 {
margin: 2px 0 4px;
color: var(--op-text);
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 720;
letter-spacing: -.03em;
}
.op-cashier-recent-modal-head span {
display: block;
color: var(--op-muted);
font-size: .82rem;
line-height: 1.35;
}
.op-cashier-recent-modal-head > b {
flex: 0 0 auto;
min-width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: rgba(6, 37, 91, .08);
color: var(--op-text);
font-size: .82rem;
}
.op-cashier-recent-modal-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.op-cashier-recent-modal-list a,
.op-cashier-recent-modal-list p {
min-height: 86px;
}
.op-inventory-integrity-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(18, 128, 92, .12);
border-radius: 18px;
background: rgba(18, 128, 92, .06);
}
.op-inventory-integrity-chip {
min-height: 30px;
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
font-size: .76rem;
font-weight: 760;
letter-spacing: .025em;
white-space: nowrap;
}
.op-inventory-integrity-chip.is-ok {
color: #0b7655;
background: rgba(18, 128, 92, .11);
}
.op-inventory-integrity-chip.is-warn {
color: #a66300;
background: rgba(217, 119, 6, .11);
}
.op-inventory-integrity-info {
min-height: 30px;
margin-left: auto;
padding: 6px 11px;
border: 1px solid rgba(20, 33, 61, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .82);
color: var(--op-text);
font: inherit;
font-size: .75rem;
font-weight: 700;
cursor: pointer;
}
.op-inventory-integrity-info:hover,
.op-inventory-integrity-info:focus-visible {
border-color: rgba(6, 87, 184, .22);
background: #fff;
outline: none;
}
.op-inventory-integrity-modal {
z-index: 126;
}
.op-inventory-integrity-modal-card {
width: min(720px, calc(100vw - 28px));
max-height: min(88vh, 820px);
overflow: auto;
padding: 22px;
border-radius: 28px;
}
.op-inventory-integrity-modal-head {
padding-right: 36px;
}
.op-inventory-integrity-modal-head h2 {
margin: 2px 0 6px;
color: var(--op-text);
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 720;
letter-spacing: -.03em;
}
.op-inventory-integrity-modal-head > p:last-child {
margin: 0;
color: var(--op-muted);
line-height: 1.45;
}
.op-inventory-integrity-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
margin-top: 16px;
}
.op-inventory-integrity-modal-grid article {
display: grid;
gap: 5px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(20, 33, 61, .08);
background: rgba(20, 33, 61, .035);
}
.op-inventory-integrity-modal-grid article.is-ok {
border-color: rgba(18, 128, 92, .15);
background: rgba(18, 128, 92, .065);
}
.op-inventory-integrity-modal-grid article.is-warn {
border-color: rgba(217, 119, 6, .16);
background: rgba(217, 119, 6, .065);
}
.op-inventory-integrity-modal-grid strong,
.op-inventory-legacy-compact strong {
color: var(--op-text);
font-weight: 740;
}
.op-inventory-integrity-modal-grid span,
.op-inventory-legacy-compact p,
.op-inventory-legacy-compact span {
color: var(--op-muted);
font-size: .82rem;
line-height: 1.4;
}
.op-inventory-legacy-compact {
display: grid;
gap: 10px;
margin-top: 14px;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(217, 119, 6, .16);
background: rgba(217, 119, 6, .055);
}
.op-inventory-legacy-compact h3,
.op-inventory-legacy-compact p {
margin: 0;
}
.op-inventory-legacy-compact article {
display: grid;
gap: 7px;
padding: 11px 12px;
border-radius: 15px;
background: rgba(255, 255, 255, .78);
}
.op-inventory-legacy-compact article > div {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.op-inventory-legacy-compact article span {
padding: 4px 7px;
border-radius: 999px;
background: rgba(20, 33, 61, .055);
}
@media (max-width: 1500px) {
.op-cashier-topbar {
grid-template-areas:
"title right"
"channels channels";
grid-template-columns: auto minmax(0, 1fr);
}
.op-cashier-topbar-right {
justify-content: flex-end;
}
}
@media (max-width: 1050px) {
.op-cashier-topbar {
grid-template-areas:
"title"
"channels"
"right";
grid-template-columns: 1fr;
}
.op-cashier-topbar-right {
justify-content: stretch;
}
.op-cashier-summary-strip {
flex: 1 1 auto;
}
}
@media (max-width: 760px) {
.op-cashier-channel-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-cashier-channel-recent {
grid-column: 1 / -1;
}
.op-cashier-topbar-right {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.op-cashier-summary-strip {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-cashier-summary-chip,
.op-cashier-topbar-right form,
.op-cashier-topbar-right form .op-btn,
.op-cashier-refresh-action {
width: 100%;
min-width: 0;
}
.op-cashier-order-feed {
grid-template-columns: 1fr;
gap: 12px;
}
.op-cashier-recent-modal-card,
.op-inventory-integrity-modal-card {
padding: 17px;
border-radius: 22px;
}
.op-cashier-recent-modal-list {
grid-template-columns: 1fr;
}
.op-inventory-integrity-info {
width: 100%;
margin-left: 0;
justify-content: center;
}
}
/* PATCH 133B · Corrección de distribución adaptable en Caja */
.op-cashier-topbar {
grid-template-areas: "title channels right";
grid-template-columns: max-content minmax(0, 1fr) max-content;
column-gap: clamp(14px, 1.15vw, 22px);
row-gap: 10px;
}
.op-cashier-channel-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 9px;
min-width: 0;
}
.op-cashier-channel-strip > a,
.op-cashier-channel-strip > form,
.op-cashier-channel-strip > button {
flex: 0 0 auto;
width: auto;
min-width: 0;
}
.op-cashier-channel-strip > a,
.op-cashier-channel-strip > .op-cashier-channel-start button,
.op-cashier-channel-strip > .op-cashier-channel-recent {
width: auto;
min-width: 0;
padding-inline: 14px;
}
.op-cashier-topbar-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
.op-cashier-summary-strip {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-items: center;
gap: 7px;
min-width: 0;
}
.op-cashier-summary-chip {
flex: 0 0 auto;
width: auto;
min-width: 92px;
}
.op-cashier-refresh-action {
flex: 0 0 42px;
width: 42px;
min-width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border-radius: 14px;
color: var(--op-text);
background: rgba(20, 33, 61, .045);
border: 1px solid rgba(20, 33, 61, .08);
font-size: 1rem;
font-weight: 760;
}
.op-cashier-topbar-right > form,
.op-cashier-topbar-right > form .op-btn {
flex: 0 0 auto;
width: auto;
min-width: 96px;
white-space: nowrap;
}
.op-cashier-order-feed {
grid-template-columns: repeat(auto-fill, minmax(355px, 1fr));
justify-content: start;
align-items: start;
gap: clamp(12px, 1vw, 18px);
}
@media (max-width: 1500px) {
.op-cashier-topbar {
grid-template-areas:
"title right"
"channels channels";
grid-template-columns: max-content minmax(0, 1fr);
}
.op-cashier-topbar-right {
justify-content: flex-end;
}
}
@media (max-width: 1050px) {
.op-cashier-topbar {
grid-template-areas:
"title"
"channels"
"right";
grid-template-columns: minmax(0, 1fr);
}
.op-cashier-topbar-right {
justify-content: flex-start;
}
}
@media (max-width: 760px) {
.op-cashier-channel-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.op-cashier-channel-strip > a,
.op-cashier-channel-strip > form,
.op-cashier-channel-strip > button {
flex: 0 0 auto;
width: auto;
}
.op-cashier-channel-strip > a,
.op-cashier-channel-strip > .op-cashier-channel-start button,
.op-cashier-channel-strip > .op-cashier-channel-recent {
width: auto;
min-height: 46px;
padding-inline: 12px;
}
.op-cashier-topbar-right {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.op-cashier-summary-strip {
flex: 1 1 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.op-cashier-summary-chip {
width: 100%;
min-width: 0;
}
.op-cashier-refresh-action {
flex-basis: 44px;
width: 44px;
min-width: 44px;
height: 44px;
}
.op-cashier-topbar-right > form,
.op-cashier-topbar-right > form .op-btn {
width: auto;
min-width: 104px;
}
.op-cashier-order-feed {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
gap: 12px;
}
}
/* PATCH 135 · Reporte diario V2 de solo lectura */
.op-daily-v2-hero {
display: grid;
gap: 18px;
}
.op-daily-v2-hero-head {
align-items: flex-start;
}
.op-daily-v2-status {
min-width: min(360px, 100%);
max-width: 460px;
border: 1px solid #d1d5db;
border-radius: 18px;
padding: 14px 16px;
background: #f8fafc;
}
.op-daily-v2-status strong,
.op-daily-v2-status span {
display: block;
}
.op-daily-v2-status strong {
color: #111827;
font-size: .82rem;
letter-spacing: .07em;
}
.op-daily-v2-status span {
margin-top: 5px;
color: #64748b;
font-size: .86rem;
line-height: 1.35;
}
.op-daily-v2-status.is-success {
border-color: #86efac;
background: #ecfdf5;
}
.op-daily-v2-status.is-success strong {
color: #047857;
}
.op-daily-v2-status.is-warning {
border-color: #fcd34d;
background: #fffbeb;
}
.op-daily-v2-status.is-warning strong {
color: #b45309;
}
.op-daily-v2-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.op-daily-v2-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
.op-daily-v2-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.op-daily-v2-card {
min-width: 0;
}
.op-daily-v2-receipts {
display: grid;
gap: 16px;
}
.op-daily-v2-receipts-head {
align-items: flex-start;
}
.op-daily-v2-filter-note {
margin: -4px 0 0;
padding: 10px 12px;
border-radius: 12px;
color: #92400e;
background: #fffbeb;
font-size: .82rem;
}
.op-daily-v2-receipt-list {
display: grid;
gap: 12px;
}
.op-daily-v2-receipt {
border: 1px solid #dce2ea;
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.op-daily-v2-receipt > summary {
display: grid;
grid-template-columns: minmax(190px, 1.1fr) minmax(150px, 1fr) minmax(190px, 1.3fr) minmax(135px, .75fr) auto;
gap: 12px;
align-items: center;
padding: 14px 16px;
cursor: pointer;
list-style: none;
}
.op-daily-v2-receipt > summary::-webkit-details-marker {
display: none;
}
.op-daily-v2-receipt > summary > span {
min-width: 0;
}
.op-daily-v2-receipt > summary strong,
.op-daily-v2-receipt > summary small {
display: block;
}
.op-daily-v2-receipt > summary strong {
color: #0f172a;
overflow-wrap: anywhere;
}
.op-daily-v2-receipt > summary small {
margin-top: 3px;
color: #64748b;
font-size: .76rem;
}
.op-daily-v2-money {
text-align: right;
white-space: nowrap;
}
.op-daily-v2-detail-label {
border-radius: 999px;
padding: 7px 10px;
color: #fff;
background: #111827;
font-size: .72rem;
font-weight: 800;
letter-spacing: .04em;
}
.op-daily-v2-receipt[open] .op-daily-v2-detail-label {
background: #991b1b;
}
.op-daily-v2-receipt-detail {
display: grid;
gap: 14px;
padding: 0 16px 16px;
border-top: 1px solid #e5e7eb;
background: #f8fafc;
}
.op-daily-v2-receipt-totals {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
padding-top: 14px;
}
.op-daily-v2-receipt-totals > div {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 10px;
background: #fff;
}
.op-daily-v2-receipt-totals span,
.op-daily-v2-receipt-totals strong {
display: block;
}
.op-daily-v2-receipt-totals span {
color: #64748b;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.op-daily-v2-receipt-totals strong {
margin-top: 4px;
color: #0f172a;
}
.op-daily-v2-payments {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 8px;
}
.op-daily-v2-payments article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 10px 12px;
background: #fff;
}
.op-daily-v2-payments article div > * {
display: block;
}
.op-daily-v2-payments span,
.op-daily-v2-payments small {
margin-top: 2px;
color: #64748b;
font-size: .74rem;
}
.op-daily-v2-order-totals {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 9px 10px;
border-bottom: 1px solid #e5e7eb;
}
.op-daily-v2-order-totals span {
border-radius: 999px;
padding: 5px 8px;
color: #475569;
background: #f1f5f9;
font-size: .7rem;
font-weight: 700;
}
.op-daily-v2-promotions {
display: grid;
gap: 6px;
padding: 10px;
border-bottom: 1px solid #e5e7eb;
background: #fff7ed;
}
.op-daily-v2-promotions > div {
display: flex;
justify-content: space-between;
gap: 12px;
}
.op-daily-v2-promotions span small {
display: block;
margin-top: 2px;
color: #9a3412;
}
.op-daily-v2-promo-tag {
color: #b45309 !important;
font-weight: 800;
}
.op-daily-v2-cash-sessions {
display: grid;
gap: 10px;
}
.op-daily-v2-cash-sessions article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 12px 14px;
background: #fff;
}
.op-daily-v2-cash-sessions article > div > * {
display: block;
}
.op-daily-v2-cash-sessions article > div:last-child {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.op-daily-v2-cash-sessions span,
.op-daily-v2-cash-sessions small {
margin-top: 3px;
color: #64748b;
font-size: .75rem;
}
@media (max-width: 1050px) {
.op-daily-v2-grid {
grid-template-columns: 1fr;
}
.op-daily-v2-receipt > summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-daily-v2-detail-label {
justify-self: start;
}
.op-daily-v2-receipt-totals {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.op-daily-v2-status {
min-width: 0;
width: 100%;
}
.op-daily-v2-toolbar,
.op-daily-v2-toolbar .op-daily-report-filter,
.op-daily-v2-toolbar .op-daily-report-actions {
width: 100%;
}
.op-daily-v2-receipt > summary,
.op-daily-v2-receipt-totals {
grid-template-columns: 1fr;
}
.op-daily-v2-money {
text-align: left;
}
.op-daily-v2-cash-sessions article {
grid-template-columns: 1fr;
}
.op-daily-v2-cash-sessions article > div:last-child {
justify-content: flex-start;
}
}
/* PATCH 135C · Estado operativo informativo en cartillas de Mesa */
.op-table-service-progress {
display: flex;
width: 100%;
min-width: 0;
}
.op-table-progress-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
font-size: .72rem;
font-weight: 950;
letter-spacing: .035em;
line-height: 1.1;
text-align: center;
white-space: nowrap;
}
.op-table-progress-chip.is-warning {
background: rgba(245, 158, 11, .16);
color: #92400e;
}
.op-table-progress-chip.is-info {
background: rgba(14, 116, 144, .13);
color: #075985;
}
.op-table-progress-chip.is-success {
background: rgba(22, 163, 74, .13);
color: #166534;
}
@media (max-width: 720px) {
.op-table-progress-chip {
min-height: 28px;
padding: 6px 7px;
font-size: .66rem;
letter-spacing: .025em;
}
}
/* PATCH 135D — identidad operativa de canales y promoción visible en Caja */
.op-standalone-operational-summary {
display: grid;
gap: .25rem;
min-width: 0;
}
.op-standalone-operational-summary.is-cashier {
margin-top: .45rem;
padding: .55rem .65rem;
border: 1px solid rgba(15, 23, 42, .09);
border-radius: .75rem;
background: rgba(248, 250, 252, .86);
}
.op-standalone-operational-line {
display: grid;
grid-template-columns: minmax(4.8rem, auto) minmax(0, 1fr);
gap: .45rem;
align-items: start;
font-size: .68rem;
line-height: 1.25;
}
.op-standalone-operational-line span {
color: #64748b;
font-weight: 800;
letter-spacing: .025em;
text-transform: uppercase;
}
.op-standalone-operational-line b {
min-width: 0;
color: #172033;
font-weight: 850;
overflow-wrap: anywhere;
}
.op-order-promotion-flag {
display: inline-flex;
width: fit-content;
margin-top: .38rem;
padding: .25rem .48rem;
border: 1px solid #7c3aed;
border-radius: 999px;
background: #f3e8ff;
color: #6d28d9;
font-size: .62rem;
font-weight: 950;
letter-spacing: .04em;
}
.op-order-sale-type-chip {
display: inline-flex;
width: fit-content;
max-width: 100%;
margin-bottom: .24rem;
padding: .2rem .4rem;
border-radius: 999px;
font-size: .58rem;
font-style: normal;
font-weight: 950;
letter-spacing: .025em;
line-height: 1.2;
overflow-wrap: anywhere;
}
.op-order-sale-type-chip.is-promotion {
border: 1px solid #8b5cf6;
background: #f3e8ff;
color: #6d28d9;
}
.op-order-sale-type-chip.is-normal {
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #475569;
}
.op-cashier-item-line-v3.is-promotion {
border-color: #d8b4fe;
background: linear-gradient(135deg, #faf5ff 0%, #fff 70%);
}
.op-cashier-item-price-v3 {
display: grid !important;
justify-items: end;
align-content: center;
gap: .1rem;
flex: 0 0 auto;
}
.op-cashier-item-price-v3 small {
color: #7e22ce;
font-size: .53rem;
font-weight: 900;
letter-spacing: .04em;
white-space: nowrap;
}
.op-cashier-promotion-summary-list {
display: grid;
gap: .5rem;
margin-top: .55rem;
}
.op-cashier-promotion-summary {
padding: .62rem;
border: 1px solid #c4b5fd;
border-radius: .8rem;
background: linear-gradient(145deg, #faf5ff 0%, #ffffff 72%);
}
.op-cashier-promotion-summary > header {
display: grid;
gap: .08rem;
margin-bottom: .48rem;
}
.op-cashier-promotion-summary > header span {
color: #7e22ce;
font-size: .58rem;
font-weight: 950;
letter-spacing: .08em;
}
.op-cashier-promotion-summary > header strong {
color: #3b0764;
font-size: .76rem;
line-height: 1.2;
overflow-wrap: anywhere;
}
.op-cashier-promotion-summary > header small {
color: #64748b;
font-size: .58rem;
font-weight: 800;
}
.op-cashier-promotion-summary > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .35rem;
}
.op-cashier-promotion-summary > div > span {
display: grid;
gap: .08rem;
min-width: 0;
padding: .38rem;
border-radius: .55rem;
background: rgba(255, 255, 255, .82);
}
.op-cashier-promotion-summary > div small {
color: #64748b;
font-size: .52rem;
font-weight: 850;
text-transform: uppercase;
}
.op-cashier-promotion-summary > div b {
color: #172033;
font-size: .68rem;
white-space: nowrap;
}
.op-cashier-promotion-summary > em {
display: block;
margin-top: .4rem;
color: #92400e;
font-size: .54rem;
font-style: normal;
font-weight: 850;
}
@media (max-width: 420px) {
.op-standalone-operational-line {
grid-template-columns: 1fr;
gap: .08rem;
}
.op-cashier-promotion-summary > div {
grid-template-columns: 1fr;
}
}
/* PATCH 135F · Jornada operativa de Caja y corte nocturno */
.op-daily-operational-strip {
display: grid;
grid-template-columns: minmax(250px, 1.35fr) minmax(240px, 1fr) minmax(130px, .45fr) minmax(180px, .65fr);
gap: 10px;
}
.op-daily-operational-strip > div {
min-width: 0;
border: 1px solid #dbe3ed;
border-radius: 14px;
padding: 10px 12px;
background: #f8fafc;
}
.op-daily-operational-strip > div.is-post-midnight {
border-color: #fdba74;
background: #fff7ed;
}
.op-daily-operational-strip span,
.op-daily-operational-strip strong {
display: block;
}
.op-daily-operational-strip span {
color: #64748b;
font-size: .66rem;
font-weight: 850;
letter-spacing: .045em;
text-transform: uppercase;
}
.op-daily-operational-strip strong {
margin-top: 4px;
color: #172033;
font-size: .82rem;
line-height: 1.3;
overflow-wrap: anywhere;
}
.op-daily-journey-note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-color: #86efac;
background: #ecfdf5;
}
.op-daily-journey-note strong {
color: #047857;
font-size: .78rem;
letter-spacing: .055em;
white-space: nowrap;
}
.op-daily-journey-note span {
color: #166534;
font-size: .83rem;
line-height: 1.35;
}
.op-daily-journey-control {
display: grid;
gap: 14px;
border-color: #f59e0b;
background: #fffbeb;
}
.op-daily-journey-control .op-section-head {
align-items: flex-start;
}
.op-daily-journey-issue-list {
display: grid;
gap: 8px;
}
.op-daily-journey-issue-list article {
display: grid;
grid-template-columns: minmax(210px, .75fr) minmax(280px, 1.4fr) auto;
gap: 12px;
align-items: center;
border: 1px solid #fcd34d;
border-radius: 12px;
padding: 10px 12px;
background: #fff;
}
.op-daily-journey-issue-list article.is-error {
border-color: #fca5a5;
background: #fef2f2;
}
.op-daily-journey-issue-list article > div > * {
display: block;
}
.op-daily-journey-issue-list article span {
color: #b45309;
font-size: .64rem;
font-weight: 900;
letter-spacing: .045em;
}
.op-daily-journey-issue-list article.is-error span {
color: #b91c1c;
}
.op-daily-journey-issue-list article strong {
color: #172033;
}
.op-daily-journey-issue-list article small,
.op-daily-journey-issue-list article p {
margin: 3px 0 0;
color: #64748b;
font-size: .76rem;
line-height: 1.35;
}
.op-daily-day-offset {
display: inline-flex;
align-items: center;
width: fit-content;
margin-left: 4px;
border-radius: 999px;
padding: 2px 6px;
background: #ffedd5;
color: #9a3412;
font-size: .62rem;
font-style: normal;
font-weight: 950;
letter-spacing: .035em;
white-space: nowrap;
}
.op-daily-v2-payments article.is-post-midnight {
border-color: #fdba74;
background: #fffaf3;
}
.op-daily-v2-payments article.is-outside-session {
border-color: #fca5a5;
background: #fef2f2;
}
.op-daily-payment-alert {
color: #b91c1c !important;
font-weight: 900;
letter-spacing: .035em;
}
.op-daily-v2-cash-sessions article.is-cross-midnight {
border-color: #fdba74;
background: linear-gradient(135deg, #fff7ed 0%, #fff 72%);
}
.op-daily-v2-cash-sessions article.is-multi-midnight {
border-color: #fca5a5;
background: #fef2f2;
}
@media (max-width: 1050px) {
.op-daily-operational-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-daily-journey-issue-list article {
grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
}
.op-daily-journey-issue-list article > strong {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 720px) {
.op-daily-operational-strip,
.op-daily-journey-issue-list article {
grid-template-columns: 1fr;
}
.op-daily-journey-note {
align-items: flex-start;
flex-direction: column;
}
.op-daily-journey-note strong {
white-space: normal;
}
.op-daily-journey-issue-list article > strong {
grid-column: auto;
}
}
/* PATCH 135G · stock en mano, comprometido y disponible */
.op-inventory-balance-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.op-inventory-balance-grid > div {
display: grid;
gap: 4px;
min-width: 0;
padding: 12px 10px;
border-radius: 16px;
background: rgba(6,37,91,.05);
text-align: center;
}
.op-inventory-balance-grid span {
color: var(--op-muted);
font-size: .7rem;
font-weight: 900;
letter-spacing: .04em;
}
.op-inventory-balance-grid strong {
font-size: clamp(1.18rem, 3vw, 1.65rem);
line-height: 1;
}
.op-inventory-balance-grid > div.is-danger {
background: rgba(180,35,24,.1);
color: var(--op-danger);
}
.op-inventory-commitment-note {
margin: -3px 0 0;
padding: 9px 11px;
border-radius: 13px;
background: rgba(177,103,0,.09);
color: #9a5a00;
font-size: .76rem;
font-weight: 850;
line-height: 1.35;
}
.op-inventory-commitment-note.is-danger {
background: rgba(180,35,24,.1);
color: var(--op-danger);
}
@media (max-width: 430px) {
.op-inventory-balance-grid {
gap: 6px;
}
.op-inventory-balance-grid > div {
padding: 10px 6px;
}
.op-inventory-balance-grid span {
font-size: .61rem;
}
}
/* PATCH 135G · composición comercial congelada después del primer PAY */
.op-commercial-freeze-state,
.op-commercial-freeze-card,
.op-commercial-freeze-inline {
border: 1px solid rgba(180, 83, 9, .24);
background: rgba(255, 247, 237, .88);
}
.op-commercial-freeze-card {
display: grid;
gap: .3rem;
}
.op-commercial-freeze-card > span,
.op-commercial-freeze-inline > strong {
color: #9a3412;
font-size: .72rem;
font-weight: 900;
letter-spacing: .08em;
}
.op-commercial-freeze-card > strong {
color: #7c2d12;
}
.op-commercial-freeze-card p,
.op-commercial-freeze-inline p {
margin: 0;
color: #7c2d12;
line-height: 1.4;
}
/* PATCH 135H · inventario compacto por categorías, filas y columnas */
.op-inventory-filter-bar {
display: grid;
grid-template-columns: minmax(190px, .8fr) minmax(210px, .9fr) minmax(260px, 1.5fr) auto;
gap: 12px;
align-items: end;
}
.op-inventory-filter-bar > label {
display: grid;
gap: 6px;
min-width: 0;
color: var(--op-muted);
font-size: .72rem;
font-weight: 900;
letter-spacing: .055em;
text-transform: uppercase;
}
.op-inventory-filter-bar select,
.op-inventory-filter-bar input {
width: 100%;
min-height: 44px;
border: 1px solid rgba(20, 33, 61, .12);
border-radius: 13px;
padding: 9px 11px;
background: #fff;
color: var(--op-text);
font: inherit;
font-weight: 750;
text-transform: none;
letter-spacing: 0;
}
.op-inventory-filter-actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: flex-end;
}
.op-inventory-table-shell {
width: 100%;
max-height: min(68vh, 820px);
overflow: auto;
border: 1px solid rgba(20, 33, 61, .10);
border-radius: 18px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
scrollbar-gutter: stable;
}
.op-inventory-table-shell:focus-visible {
outline: 3px solid rgba(6, 37, 91, .18);
outline-offset: 2px;
}
.op-inventory-table {
width: 100%;
min-width: 1120px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.op-inventory-table thead th {
position: sticky;
top: 0;
z-index: 4;
padding: 12px 11px;
border-bottom: 1px solid rgba(20, 33, 61, .12);
background: #f5f7fb;
color: var(--op-muted);
font-size: .69rem;
font-weight: 950;
letter-spacing: .065em;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.op-inventory-table thead th:nth-child(1) { width: 22%; }
.op-inventory-table thead th:nth-child(2) { width: 14%; }
.op-inventory-table thead th:nth-child(3) { width: 15%; }
.op-inventory-table thead th:nth-child(4),
.op-inventory-table thead th:nth-child(5),
.op-inventory-table thead th:nth-child(6),
.op-inventory-table thead th:nth-child(7) { width: 8%; }
.op-inventory-table thead th:nth-child(8) { width: 10%; }
.op-inventory-table thead th:nth-child(9) { width: 11%; }
.op-inventory-table th.is-number,
.op-inventory-table td.op-inventory-number-cell {
text-align: right;
}
.op-inventory-table th.is-action {
text-align: center;
}
.op-inventory-category-row th {
padding: 10px 12px;
border-top: 1px solid rgba(6, 37, 91, .10);
border-bottom: 1px solid rgba(6, 37, 91, .08);
background: #eaf0fa;
color: var(--op-primary);
font-size: .73rem;
font-weight: 950;
letter-spacing: .075em;
text-align: left;
}
.op-inventory-stock-row td {
padding: 11px;
border-bottom: 1px solid rgba(20, 33, 61, .075);
background: #fff;
vertical-align: middle;
}
.op-inventory-stock-row:last-child td {
border-bottom: 0;
}
.op-inventory-stock-row:hover td {
background: rgba(6, 37, 91, .026);
}
.op-inventory-stock-row:target td {
animation: op-inventory-row-highlight 2.4s ease-out;
}
@keyframes op-inventory-row-highlight {
0%, 42% { background: rgba(255, 215, 64, .22); }
100% { background: #fff; }
}
.op-inventory-stock-row.is-warning td:first-child {
box-shadow: inset 4px 0 0 rgba(183, 121, 31, .58);
}
.op-inventory-stock-row.is-danger td:first-child {
box-shadow: inset 4px 0 0 rgba(180, 35, 24, .7);
}
.op-inventory-product-cell,
.op-inventory-variant-cell,
.op-inventory-last-cell,
.op-inventory-status-cell {
min-width: 0;
}
.op-inventory-product-cell strong,
.op-inventory-variant-cell strong,
.op-inventory-last-cell strong {
display: block;
overflow: hidden;
color: var(--op-text);
font-size: .84rem;
font-weight: 900;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-inventory-product-cell small,
.op-inventory-variant-cell small,
.op-inventory-last-cell small,
.op-inventory-status-cell small {
display: block;
margin-top: 3px;
overflow: hidden;
color: var(--op-muted);
font-size: .68rem;
font-weight: 750;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-inventory-status-cell .op-status {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-inventory-status-cell small.is-danger {
color: var(--op-danger);
}
.op-inventory-number-cell strong {
display: block;
color: var(--op-text);
font-size: .96rem;
font-variant-numeric: tabular-nums;
font-weight: 950;
white-space: nowrap;
}
.op-inventory-number-cell.is-warning strong {
color: #9a5a00;
}
.op-inventory-number-cell.is-danger strong {
color: var(--op-danger);
}
.op-inventory-action-cell {
text-align: center;
}
.op-inventory-movement-button {
min-height: 36px;
width: 100%;
padding: 7px 9px;
border-radius: 11px;
font-size: .69rem;
white-space: nowrap;
}
.op-inventory-action-state {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(20, 33, 61, .06);
color: var(--op-muted);
font-size: .64rem;
font-weight: 900;
letter-spacing: .035em;
white-space: nowrap;
}
.op-inventory-action-state.is-blocked {
background: rgba(180, 35, 24, .09);
color: var(--op-danger);
}
.op-inventory-empty-cell {
padding: 38px 18px !important;
text-align: center;
}
.op-inventory-empty-cell strong,
.op-inventory-empty-cell span {
display: block;
}
.op-inventory-empty-cell span {
margin-top: 6px;
color: var(--op-muted);
}
.op-inventory-movement-modal-card {
width: min(720px, calc(100vw - 28px));
max-height: min(92vh, 900px);
overflow-y: auto;
}
.op-inventory-movement-form {
display: grid;
gap: 15px;
}
.op-inventory-movement-head {
padding-right: 42px;
}
.op-inventory-movement-head h2 {
margin: 3px 0 4px;
font-size: clamp(1.35rem, 3vw, 2rem);
}
.op-inventory-movement-head > p:last-child {
margin: 0;
color: var(--op-muted);
font-weight: 750;
}
.op-inventory-movement-context,
.op-inventory-result-preview {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.op-inventory-movement-context article,
.op-inventory-result-preview > div {
display: grid;
gap: 4px;
min-width: 0;
padding: 11px 9px;
border-radius: 14px;
background: rgba(6, 37, 91, .055);
text-align: center;
}
.op-inventory-movement-context span,
.op-inventory-result-preview span {
color: var(--op-muted);
font-size: .64rem;
font-weight: 950;
letter-spacing: .045em;
}
.op-inventory-movement-context strong,
.op-inventory-result-preview strong {
font-size: 1.08rem;
font-variant-numeric: tabular-nums;
font-weight: 950;
}
.op-inventory-result-preview {
padding: 12px;
border: 1px solid rgba(6, 37, 91, .10);
border-radius: 17px;
background: rgba(6, 37, 91, .018);
}
.op-inventory-result-preview > div:nth-child(3),
.op-inventory-result-preview > div:nth-child(4) {
background: rgba(18, 128, 92, .08);
}
.op-inventory-movement-fields {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.op-inventory-movement-fields label small {
display: block;
margin-top: 5px;
color: var(--op-muted);
font-size: .68rem;
font-weight: 700;
line-height: 1.35;
}
.op-inventory-provisional-warning,
.op-inventory-movement-warning {
margin: 0;
}
.op-inventory-movement-warning[hidden],
.op-inventory-provisional-warning[hidden] {
display: none !important;
}
.op-inventory-movement-form .op-modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding-top: 3px;
}
.op-inventory-movement-form .op-modal-actions .op-btn {
min-width: 150px;
}
@media (max-width: 1050px) {
.op-inventory-filter-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-inventory-filter-search {
grid-column: 1 / -1;
}
.op-inventory-filter-actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.op-inventory-filter-bar,
.op-inventory-movement-fields {
grid-template-columns: 1fr;
}
.op-inventory-filter-search,
.op-inventory-filter-actions {
grid-column: auto;
}
.op-inventory-filter-actions {
align-items: stretch;
flex-direction: column;
}
.op-inventory-filter-actions .op-btn {
width: 100%;
}
.op-inventory-table-shell {
max-height: 64vh;
border-radius: 14px;
}
.op-inventory-table {
min-width: 980px;
}
.op-inventory-table thead th,
.op-inventory-stock-row td {
padding: 9px 8px;
}
.op-inventory-movement-context,
.op-inventory-result-preview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-inventory-movement-form .op-modal-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.op-inventory-movement-form .op-modal-actions .op-btn {
width: 100%;
}
}
/* PATCH 135H-R1 · refinamiento visual, catálogo y consulta imprimible */
.op-inventory-page-head {
align-items: end;
}
.op-inventory-page-head .op-muted-line,
.op-inventory-register .op-muted-line {
margin-top: 4px;
font-weight: 450;
}
.op-inventory-filter-bar {
grid-template-columns: minmax(170px, .75fr) minmax(180px, .85fr) minmax(190px, .85fr) minmax(250px, 1.45fr) auto;
gap: 10px;
}
.op-inventory-filter-bar > label {
gap: 5px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .04em;
}
.op-inventory-filter-bar select,
.op-inventory-filter-bar input {
min-height: 42px;
border-radius: 12px;
font-weight: 500;
}
.op-inventory-filter-actions {
flex-wrap: wrap;
gap: 7px;
}
.op-inventory-filter-actions .op-btn {
min-height: 42px;
padding-inline: 13px;
font-weight: 600;
}
.op-inventory-sync-reminder {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 9px 11px;
border: 1px solid rgba(153, 13, 7, .13);
border-radius: 13px;
background: rgba(153, 13, 7, .025);
}
.op-inventory-sync-reminder p {
margin: 0;
color: var(--op-muted);
font-size: .76rem;
font-weight: 450;
line-height: 1.4;
}
.op-inventory-sync-reminder form {
flex: 0 0 auto;
margin: 0;
}
.op-inventory-sync-reminder .op-btn {
min-height: 36px;
padding: 7px 12px;
border-radius: 10px;
font-size: .68rem;
font-weight: 600;
white-space: nowrap;
}
.op-inventory-info-lines {
display: grid;
gap: 6px;
padding: 8px 10px;
border-top: 1px solid rgba(20, 33, 61, .09);
border-bottom: 1px solid rgba(20, 33, 61, .09);
}
.op-inventory-info-line {
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
align-items: center;
color: #34445f;
font-size: .74rem;
font-weight: 500;
line-height: 1.35;
}
.op-inventory-info-line span {
white-space: nowrap;
}
.op-inventory-info-line.is-secondary {
color: var(--op-muted);
font-size: .7rem;
font-weight: 450;
}
.op-inventory-info-link {
border: 0;
padding: 0;
background: transparent;
color: var(--op-primary);
cursor: pointer;
font: inherit;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.op-inventory-table-shell {
max-height: none;
overflow-x: auto;
overflow-y: visible;
border-radius: 14px;
scrollbar-gutter: auto;
}
.op-inventory-table {
min-width: 1010px;
}
.op-inventory-table thead th {
padding: 10px 9px;
font-size: .65rem;
font-weight: 600;
letter-spacing: .045em;
}
.op-inventory-table thead th:nth-child(1) { width: 19%; }
.op-inventory-table thead th:nth-child(2) { width: 14%; }
.op-inventory-table thead th:nth-child(3),
.op-inventory-table thead th:nth-child(4),
.op-inventory-table thead th:nth-child(5),
.op-inventory-table thead th:nth-child(6) { width: 10%; }
.op-inventory-table thead th:nth-child(7) { width: 14%; }
.op-inventory-table thead th:nth-child(8) { width: 13%; }
.op-inventory-category-row th {
padding: 8px 10px;
font-size: .68rem;
font-weight: 600;
letter-spacing: .055em;
}
.op-inventory-product-group-row th {
padding: 7px 10px;
border-bottom: 1px solid rgba(20, 33, 61, .06);
background: #f8f9fc;
color: var(--op-text);
font-size: .78rem;
font-weight: 600;
letter-spacing: .01em;
text-align: left;
}
.op-inventory-product-group-row th span {
font-weight: inherit;
}
.op-inventory-product-group-row th em {
display: inline-flex;
margin-left: 8px;
color: #9a5a00;
font-size: .61rem;
font-style: normal;
font-weight: 500;
letter-spacing: .04em;
}
.op-inventory-product-group-row.is-inactive th {
background: #fbf7f0;
color: #5e6470;
}
.op-inventory-stock-row td {
padding: 9px;
}
.op-inventory-stock-row.is-catalog-inactive td {
background: rgba(183, 121, 31, .025);
color: #626c7e;
}
.op-inventory-variant-cell > span,
.op-inventory-last-cell > span,
.op-inventory-number-cell > span {
display: block;
color: var(--op-text);
font-size: .8rem;
font-weight: 500;
line-height: 1.25;
}
.op-inventory-number-cell > span {
font-size: .84rem;
font-variant-numeric: tabular-nums;
font-weight: 500;
white-space: nowrap;
}
.op-inventory-number-cell.is-warning > span {
color: #9a5a00;
}
.op-inventory-number-cell.is-danger > span {
color: var(--op-danger);
}
.op-inventory-variant-cell small,
.op-inventory-last-cell small,
.op-inventory-status-cell small {
margin-top: 2px;
font-size: .64rem;
font-weight: 450;
}
.op-inventory-status-cell .op-status {
font-size: .61rem;
font-weight: 600;
letter-spacing: .025em;
}
.op-inventory-movement-button {
font-weight: 600;
}
.op-inventory-action-state {
font-weight: 500;
}
.op-inventory-movement-head > p:last-child,
.op-inventory-movement-fields label small {
font-weight: 450;
}
.op-inventory-movement-context span,
.op-inventory-result-preview span {
font-weight: 500;
}
.op-inventory-movement-context strong,
.op-inventory-result-preview strong {
font-weight: 600;
}
.op-inventory-integrity-modal-head p,
.op-inventory-integrity-modal-grid p,
.op-inventory-legacy-compact p,
.op-inventory-legacy-compact span {
font-weight: 450;
}
.op-inventory-integrity-modal-grid article > span,
.op-inventory-legacy-compact h3 {
font-weight: 600;
}
.op-inventory-recent-modal-card {
width: min(860px, calc(100vw - 28px));
max-height: min(90vh, 860px);
overflow-y: auto;
}
.op-inventory-recent-head {
padding-right: 42px;
}
.op-inventory-recent-head h2 {
margin: 3px 0 4px;
font-size: clamp(1.35rem, 3vw, 1.9rem);
font-weight: 600;
}
.op-inventory-recent-head > p:last-child {
margin: 0;
color: var(--op-muted);
font-weight: 450;
}
.op-inventory-recent-list {
display: grid;
gap: 0;
margin-top: 14px;
border-top: 1px solid rgba(20, 33, 61, .10);
}
.op-inventory-recent-list article {
display: grid;
grid-template-columns: minmax(210px, 1.15fr) minmax(300px, 1.7fr) auto;
gap: 12px;
align-items: center;
padding: 10px 3px;
border-bottom: 1px solid rgba(20, 33, 61, .08);
}
.op-inventory-recent-main {
display: flex;
gap: 6px;
align-items: baseline;
min-width: 0;
}
.op-inventory-recent-main > span:last-child {
overflow: hidden;
color: var(--op-text);
font-size: .78rem;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-inventory-recent-type {
flex: 0 0 auto;
color: var(--op-muted);
font-size: .64rem;
font-weight: 500;
letter-spacing: .035em;
text-transform: uppercase;
}
.op-inventory-recent-detail {
display: flex;
flex-wrap: wrap;
gap: 3px 10px;
min-width: 0;
color: var(--op-muted);
font-size: .67rem;
font-weight: 400;
}
.op-inventory-recent-detail span {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-inventory-recent-quantity {
color: #08764f;
font-size: .84rem;
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.op-inventory-recent-quantity.is-negative {
color: var(--op-danger);
}
@media (max-width: 1220px) {
.op-inventory-filter-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-inventory-filter-search,
.op-inventory-filter-actions {
grid-column: 1 / -1;
}
.op-inventory-filter-actions {
justify-content: flex-start;
}
}
@media (max-width: 760px) {
.op-inventory-sync-reminder {
align-items: stretch;
flex-direction: column;
}
.op-inventory-sync-reminder .op-btn {
width: 100%;
}
.op-inventory-info-line {
gap: 4px 10px;
}
.op-inventory-recent-list article {
grid-template-columns: minmax(0, 1fr) auto;
}
.op-inventory-recent-detail {
grid-column: 1 / -1;
grid-row: 2;
}
}
@media (max-width: 640px) {
.op-inventory-filter-bar {
grid-template-columns: 1fr;
}
.op-inventory-filter-search,
.op-inventory-filter-actions {
grid-column: auto;
}
.op-inventory-filter-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-inventory-filter-actions .op-btn {
width: 100%;
}
.op-inventory-table-shell {
max-height: none;
border-radius: 12px;
}
.op-inventory-table {
min-width: 900px;
}
.op-inventory-product-group-row th,
.op-inventory-category-row th,
.op-inventory-table thead th,
.op-inventory-stock-row td {
padding-inline: 8px;
}
}
/* PATCH 135H-R2 · claridad del movimiento y aviso post-registro */
.op-inventory-movement-head h2 {
max-width: 100%;
margin-bottom: 0;
font-weight: 650;
line-height: 1.16;
overflow-wrap: anywhere;
}
.op-inventory-modal-catalog-note,
.op-inventory-post-movement-notice {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid rgba(153, 13, 7, .13);
border-radius: 13px;
background: rgba(153, 13, 7, .025);
color: #4d596d;
font-size: .73rem;
font-weight: 450;
line-height: 1.4;
}
.op-inventory-modal-catalog-note span,
.op-inventory-post-movement-notice span:first-child {
color: var(--op-text);
font-weight: 550;
}
.op-inventory-modal-catalog-note p {
margin: 0;
font: inherit;
}
.op-inventory-post-movement-notice {
border-color: rgba(18, 128, 92, .18);
background: rgba(18, 128, 92, .045);
}
/* PATCH 135I · incidencias de producción anulada */
.op-kds-report-metrics article.is-production-total {
border-color: rgba(14, 116, 144, .18);
background: rgba(14, 116, 144, .055);
}
.op-kds-report-metrics article.is-incident {
border-color: rgba(180, 83, 9, .20);
background: rgba(245, 158, 11, .065);
}
.op-kds-incident-section,
.op-daily-production-incidents {
border-color: rgba(180, 83, 9, .18);
background: linear-gradient(145deg, rgba(255, 251, 235, .76), rgba(255, 255, 255, .98));
}
.op-kds-incident-head,
.op-daily-production-incidents-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.op-kds-incident-head h4,
.op-daily-production-incidents-head h2 {
margin: 3px 0 4px;
}
.op-kds-incident-head p,
.op-daily-production-incidents-head p {
margin: 0;
color: var(--op-muted);
font-size: .78rem;
font-weight: 450;
line-height: 1.4;
}
.op-kds-incident-kicker,
.op-kds-incident-count,
.op-daily-production-incident-number {
color: #92400e;
font-size: .68rem;
font-weight: 650;
letter-spacing: .055em;
text-transform: uppercase;
}
.op-kds-incident-count {
flex: 0 0 auto;
padding: 6px 9px;
border-radius: 999px;
background: rgba(245, 158, 11, .13);
}
.op-kds-incident-summary,
.op-daily-production-incident-summary {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid rgba(180, 83, 9, .13);
border-radius: 12px;
background: rgba(255, 255, 255, .74);
color: #5f6675;
font-size: .73rem;
font-weight: 450;
}
.op-kds-incident-summary b,
.op-daily-production-incident-summary strong {
margin-left: 3px;
color: var(--op-text);
font-weight: 650;
}
.op-kds-incident-rule,
.op-daily-production-incident-rule,
.op-kds-incident-notice,
.op-daily-production-incident-note {
margin: 10px 0 0;
color: #7c4a10;
font-size: .72rem;
font-weight: 450;
line-height: 1.45;
}
.op-kds-incident-table {
min-width: 1320px;
margin-top: 12px;
}
.op-kds-incident-table td {
font-weight: 450;
}
.op-kds-incident-table td > span,
.op-kds-incident-table td > small {
display: block;
}
.op-kds-incident-table td > small {
margin-top: 3px;
color: var(--op-muted);
font-size: .67rem;
font-weight: 400;
}
.op-kds-incident-table tr.is-elaborated td {
background: rgba(254, 242, 242, .64);
}
.op-kds-incident-table tr.is-ambiguous td {
background: rgba(255, 251, 235, .78);
}
.op-kds-incident-stage,
.op-kds-incident-quality,
.op-kds-incident-promo {
display: inline-flex !important;
width: fit-content;
padding: 3px 7px;
border-radius: 999px;
background: rgba(148, 163, 184, .14);
color: #475569;
font-size: .64rem !important;
font-weight: 600 !important;
line-height: 1.25;
}
.op-kds-incident-promo {
background: rgba(245, 158, 11, .12);
color: #92400e !important;
}
.op-kds-incident-table .is-acknowledged {
color: #047857;
}
.op-kds-incident-table .is-pending {
color: #b45309;
}
.op-daily-production-incidents {
display: grid;
gap: 12px;
}
.op-daily-production-incident-list {
display: grid;
gap: 8px;
}
.op-daily-production-incident-list article {
display: grid;
grid-template-columns: minmax(220px, 1.15fr) minmax(150px, .65fr) minmax(260px, 1.4fr) minmax(140px, .65fr);
gap: 14px;
align-items: center;
padding: 12px 14px;
border: 1px solid rgba(20, 33, 61, .09);
border-left: 4px solid rgba(180, 83, 9, .45);
border-radius: 14px;
background: rgba(255, 255, 255, .88);
}
.op-daily-production-incident-list article.is-elaborated {
border-left-color: #b91c1c;
background: rgba(254, 242, 242, .58);
}
.op-daily-production-incident-list article.is-ambiguous {
border-left-color: #d97706;
background: rgba(255, 251, 235, .72);
}
.op-daily-production-incident-main h3 {
margin: 3px 0;
color: var(--op-text);
font-size: .9rem;
font-weight: 620;
line-height: 1.3;
}
.op-daily-production-incident-main p,
.op-daily-production-incident-main small,
.op-daily-production-incident-control p,
.op-daily-production-incident-control small,
.op-daily-production-incident-money span,
.op-daily-production-incident-money small {
display: block;
margin: 2px 0 0;
color: var(--op-muted);
font-size: .7rem;
font-weight: 420;
line-height: 1.35;
}
.op-daily-production-incident-state,
.op-daily-production-incident-money {
display: grid;
gap: 3px;
}
.op-daily-production-incident-state span,
.op-daily-production-incident-state small {
color: var(--op-muted);
font-size: .68rem;
font-weight: 450;
}
.op-daily-production-incident-state strong,
.op-daily-production-incident-money strong {
color: var(--op-text);
font-size: .82rem;
font-weight: 650;
}
.op-daily-production-incident-money {
text-align: right;
}
@media (max-width: 980px) {
.op-daily-production-incident-list article {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-daily-production-incident-money {
text-align: left;
}
}
@media (max-width: 680px) {
.op-kds-incident-head,
.op-daily-production-incidents-head {
align-items: stretch;
flex-direction: column;
}
.op-kds-incident-count {
align-self: flex-start;
}
.op-daily-production-incident-list article {
grid-template-columns: 1fr;
}
}
/* PATCH 136 · PIN superior y autorización crítica */
.op-superior-pins-page .op-compact-summary-line {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .55rem 1rem;
}
.op-superior-pin-reveal {
border: 1px solid rgba(22, 163, 74, .35);
max-width: 34rem;
}
.op-superior-pin-value {
background: rgba(15, 23, 42, .06);
border: 1px dashed rgba(15, 23, 42, .25);
border-radius: .8rem;
font-size: clamp(2rem, 6vw, 3.4rem);
font-variant-numeric: tabular-nums;
letter-spacing: .32em;
line-height: 1;
margin: .75rem 0;
padding: 1rem 1rem 1rem 1.32rem;
text-align: center;
user-select: all;
}
.op-exception-auth[data-critical-authorization-mode="superior_pin"] {
border-left: 3px solid var(--op-primary, #9f111b);
padding-left: .8rem;
}
.op-exception-auth input[name="superior_pin"] {
font-variant-numeric: tabular-nums;
letter-spacing: .22em;
}
@media (max-width: 640px) {
.op-superior-pin-value {
font-size: 2rem;
letter-spacing: .22em;
padding-left: 1.1rem;
}
}
/* PATCH 136B · Anulaciones 2.0 */
.op-cancellation-entry {
display: grid;
gap: .35rem;
margin-top: .65rem;
}
.op-cancellation-entry > small {
color: var(--op-muted);
font-size: .68rem;
font-weight: 450;
line-height: 1.35;
}
.op-cancellation-modal-card {
display: grid;
gap: 1rem;
max-height: min(92vh, 980px);
max-width: 920px;
overflow: auto;
width: min(94vw, 920px);
}
.op-cancellation-head {
align-items: start;
display: flex;
gap: 1rem;
justify-content: space-between;
}
.op-cancellation-head > div:first-child {
display: grid;
gap: .2rem;
}
.op-cancellation-head span,
.op-cancellation-head p,
.op-cancellation-head small {
color: var(--op-muted);
font-size: .72rem;
font-weight: 450;
letter-spacing: .03em;
margin: 0;
}
.op-cancellation-head h2 {
font-size: clamp(1.35rem, 3vw, 2rem);
font-weight: 650;
line-height: 1.05;
margin: 0;
}
.op-cancellation-total {
background: rgba(15, 23, 42, .04);
border: 1px solid rgba(15, 23, 42, .1);
border-radius: .8rem;
display: grid;
gap: .15rem;
min-width: 8.5rem;
padding: .65rem .8rem;
text-align: right;
}
.op-cancellation-total strong {
font-size: 1.15rem;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.op-cancellation-blockers,
.op-cancellation-warnings {
background: #fff7ed;
border: 1px solid #fdba74;
border-radius: .8rem;
color: #9a3412;
display: grid;
gap: .3rem;
padding: .7rem .8rem;
}
.op-cancellation-blockers span,
.op-cancellation-warnings span {
font-size: .75rem;
font-weight: 550;
}
.op-cancellation-form {
display: grid;
gap: .9rem;
}
.op-cancellation-scope {
border: 0;
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin: 0;
padding: 0;
}
.op-cancellation-scope legend {
color: var(--op-muted);
font-size: .7rem;
font-weight: 500;
margin-bottom: .45rem;
width: 100%;
}
.op-cancellation-scope label {
align-items: center;
background: rgba(15, 23, 42, .035);
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 999px;
cursor: pointer;
display: inline-flex;
font-size: .72rem;
font-weight: 550;
gap: .45rem;
padding: .5rem .7rem;
}
.op-cancellation-items {
display: grid;
gap: .65rem;
}
.op-cancellation-item {
border: 1px solid rgba(15, 23, 42, .12);
border-radius: .85rem;
display: grid;
gap: .65rem;
padding: .75rem;
}
.op-cancellation-item.is-blocked {
background: rgba(148, 163, 184, .08);
opacity: .76;
}
.op-cancellation-item-head {
align-items: start;
display: flex;
gap: .75rem;
justify-content: space-between;
}
.op-cancellation-item-head > div {
display: grid;
gap: .2rem;
}
.op-cancellation-item-head h3,
.op-cancellation-item-head p {
margin: 0;
}
.op-cancellation-item-head h3 {
font-size: .92rem;
font-weight: 600;
}
.op-cancellation-item-head p,
.op-cancellation-item-head > span {
color: var(--op-muted);
font-size: .68rem;
font-weight: 450;
}
.op-cancellation-units {
display: grid;
gap: .4rem;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.op-cancellation-units label {
align-items: center;
border: 1px solid rgba(15, 23, 42, .12);
border-radius: .65rem;
cursor: pointer;
display: flex;
font-size: .7rem;
font-weight: 500;
gap: .45rem;
padding: .55rem .6rem;
}
.op-cancellation-units label:has(input:checked) {
background: rgba(185, 28, 28, .07);
border-color: rgba(185, 28, 28, .45);
color: #991b1b;
}
.op-cancellation-item-blocked {
color: #9a3412;
font-size: .72rem;
font-weight: 550;
}
.op-cancellation-quantity-field,
.op-cancellation-promotions label {
display: grid;
font-size: .72rem;
font-weight: 500;
gap: .35rem;
}
.op-cancellation-quantity-field small {
color: var(--op-muted);
font-weight: 430;
}
.op-cancellation-promotions {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: .85rem;
display: grid;
gap: .65rem;
padding: .8rem;
}
.op-cancellation-promotions h3,
.op-cancellation-promotions p {
margin: 0;
}
.op-cancellation-promotions h3 {
font-size: .9rem;
font-weight: 600;
}
.op-cancellation-promotions p {
color: #78350f;
font-size: .7rem;
font-weight: 430;
}
.op-cancellation-preview-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .7rem;
}
.op-cancellation-preview-actions > span {
color: var(--op-muted);
font-size: .7rem;
font-weight: 450;
}
.op-cancellation-preview {
border: 1px solid rgba(15, 23, 42, .12);
border-radius: .85rem;
display: grid;
gap: .65rem;
padding: .8rem;
}
.op-cancellation-preview > header {
align-items: center;
display: grid;
gap: .6rem;
grid-template-columns: 1fr auto 1fr;
}
.op-cancellation-preview > header > div {
display: grid;
gap: .15rem;
}
.op-cancellation-preview > header > div:last-child {
text-align: right;
}
.op-cancellation-preview header small,
.op-cancellation-preview header span {
color: var(--op-muted);
font-size: .67rem;
font-weight: 450;
}
.op-cancellation-preview header strong {
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.op-cancellation-preview-line {
align-items: center;
border-top: 1px solid rgba(15, 23, 42, .08);
display: grid;
gap: .5rem;
grid-template-columns: minmax(0, 1fr) auto auto;
padding-top: .55rem;
}
.op-cancellation-preview-line > div {
display: grid;
gap: .12rem;
}
.op-cancellation-preview-line strong,
.op-cancellation-preview-line span,
.op-cancellation-preview-line em,
.op-cancellation-preview-line small {
font-size: .7rem;
}
.op-cancellation-preview-line strong {
font-weight: 550;
}
.op-cancellation-preview-line span {
color: var(--op-muted);
font-variant-numeric: tabular-nums;
}
.op-cancellation-preview-line em {
color: #991b1b;
font-style: normal;
font-weight: 600;
}
.op-cancellation-preview-summary {
align-items: center;
background: rgba(185, 28, 28, .06);
border-radius: .65rem;
display: flex;
justify-content: space-between;
padding: .55rem .65rem;
}
.op-cancellation-preview-summary span {
font-size: .72rem;
font-weight: 450;
}
.op-cancellation-preview-summary strong {
color: #991b1b;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.op-cancellation-authorization {
border-top: 1px solid rgba(15, 23, 42, .12);
display: grid;
gap: .45rem;
padding-top: .8rem;
}
.op-cancellation-authorization h3,
.op-cancellation-authorization p {
margin: 0;
}
.op-cancellation-authorization h3 {
font-size: .9rem;
font-weight: 600;
}
.op-cancellation-authorization p {
color: var(--op-muted);
font-size: .7rem;
font-weight: 430;
}
.op-cancellation-final-actions {
margin-top: .15rem;
}
@media (max-width: 640px) {
.op-cancellation-head {
display: grid;
}
.op-cancellation-total {
text-align: left;
}
.op-cancellation-preview-line {
grid-template-columns: 1fr auto;
}
.op-cancellation-preview-line em {
grid-column: 1 / -1;
}
}
/* PATCH 136B-R1 · Flujo compacto de anulación y promoción indivisible */
.op-cancellation-modal-card {
gap: .8rem;
}
.op-cancellation-head h2 {
font-size: clamp(1.25rem, 2.7vw, 1.85rem);
line-height: 1.12;
}
.op-cancellation-item {
gap: .5rem;
padding: .65rem .7rem;
}
.op-cancellation-item-row {
align-items: center;
display: grid;
gap: .65rem;
grid-template-columns: auto minmax(0, 1fr);
}
.op-cancellation-item-identity {
display: grid;
gap: .14rem;
min-width: 0;
}
.op-cancellation-item-identity h3,
.op-cancellation-item-identity p {
margin: 0;
}
.op-cancellation-item-identity h3 {
font-size: .92rem;
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
}
.op-cancellation-item-identity p {
color: var(--op-muted);
font-size: .67rem;
font-weight: 430;
line-height: 1.35;
}
.op-cancellation-selectors {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .3rem;
max-width: 9.5rem;
}
.op-cancellation-primary-check,
.op-cancellation-unit-pick {
align-items: center;
cursor: pointer;
display: inline-flex;
gap: .2rem;
margin: 0;
}
.op-cancellation-primary-check input,
.op-cancellation-unit-pick input {
height: 1rem;
margin: 0;
width: 1rem;
}
.op-cancellation-unit-pick {
background: rgba(15, 23, 42, .035);
border: 1px solid rgba(15, 23, 42, .12);
border-radius: .5rem;
min-height: 2rem;
padding: .35rem .45rem;
}
.op-cancellation-unit-pick:has(input:checked),
.op-cancellation-promotion.is-selected {
background: rgba(185, 28, 28, .065);
border-color: rgba(185, 28, 28, .42);
}
.op-cancellation-unit-pick span {
font-size: .66rem;
font-weight: 600;
}
.op-cancellation-selection-placeholder {
display: block;
height: 1rem;
width: 1rem;
}
.op-cancellation-compact-quantity {
display: grid;
gap: .15rem;
margin: 0;
width: 5.5rem;
}
.op-cancellation-compact-quantity span {
color: var(--op-muted);
font-size: .58rem;
font-weight: 500;
}
.op-cancellation-compact-quantity input {
min-height: 2.15rem;
padding: .35rem .45rem;
width: 100%;
}
.op-cancellation-promotion-items {
border-top: 1px solid rgba(15, 23, 42, .08);
display: grid;
gap: .3rem;
margin-left: 1.65rem;
padding-top: .45rem;
}
.op-cancellation-promotion-items > div {
align-items: baseline;
display: flex;
gap: .6rem;
justify-content: space-between;
}
.op-cancellation-promotion-items span {
font-size: .72rem;
font-weight: 500;
}
.op-cancellation-promotion-items small {
color: var(--op-muted);
font-size: .62rem;
font-weight: 420;
text-align: right;
}
.op-cancellation-balance {
align-items: center;
background: rgba(15, 23, 42, .035);
border: 1px solid rgba(15, 23, 42, .11);
border-radius: .8rem;
display: grid;
gap: .45rem .9rem;
grid-template-columns: auto auto minmax(0, 1fr);
padding: .65rem .75rem;
}
.op-cancellation-balance > div {
display: grid;
gap: .08rem;
}
.op-cancellation-balance small {
color: var(--op-muted);
font-size: .6rem;
font-weight: 450;
}
.op-cancellation-balance strong {
font-size: 1rem;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.op-cancellation-balance > div:first-child strong {
color: #991b1b;
}
.op-cancellation-balance > span {
color: var(--op-muted);
font-size: .68rem;
font-weight: 430;
justify-self: end;
text-align: right;
}
.op-cancellation-authorization {
gap: .65rem;
}
.op-cancellation-auth-field {
display: grid;
gap: .3rem;
}
.op-cancellation-auth-field > span {
color: var(--op-text, #0f172a);
font-size: .7rem;
font-weight: 550;
}
.op-cancellation-auth-field input,
.op-cancellation-auth-field textarea {
width: 100%;
}
.op-cancellation-auth-field input[name="superior_pin"] {
font-variant-numeric: tabular-nums;
letter-spacing: .22em;
}
.op-cancellation-auth-field textarea {
min-height: 5rem;
resize: vertical;
}
.op-cancellation-final-actions {
display: grid;
gap: .55rem;
grid-template-columns: 1fr 1fr;
}
.op-cancellation-final-actions .op-btn {
margin: 0;
}
.op-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (max-width: 640px) {
.op-cancellation-item-row {
align-items: start;
}
.op-cancellation-selectors {
max-width: 7rem;
}
.op-cancellation-promotion-items {
margin-left: 0;
}
.op-cancellation-promotion-items > div {
align-items: start;
display: grid;
gap: .12rem;
}
.op-cancellation-promotion-items small {
text-align: left;
}
.op-cancellation-balance {
grid-template-columns: 1fr 1fr;
}
.op-cancellation-balance > span {
grid-column: 1 / -1;
justify-self: start;
text-align: left;
}
.op-cancellation-final-actions {
grid-template-columns: 1fr;
}
}
/* PATCH 136B-R2 · Ajuste visual denso para modal de anulación */
.op-cancellation-modal-card {
max-width: 860px;
width: min(92vw, 860px);
}
.op-cancellation-head {
gap: .85rem;
}
.op-cancellation-head > div:first-child {
min-width: 0;
}
.op-cancellation-head h2 {
max-width: 24ch;
}
.op-cancellation-total {
min-width: 7.8rem;
padding: .55rem .75rem;
}
.op-cancellation-item-row--priced {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.op-cancellation-item-price {
align-self: start;
display: grid;
gap: .1rem;
justify-items: end;
min-width: 5.9rem;
text-align: right;
}
.op-cancellation-item-price small {
color: var(--op-muted);
font-size: .58rem;
font-weight: 450;
letter-spacing: .03em;
margin: 0;
}
.op-cancellation-item-price strong {
font-size: .84rem;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.op-cancellation-promotion-items {
margin-left: 1.9rem;
}
.op-cancellation-auth-inline {
display: grid;
gap: .45rem;
grid-template-columns: minmax(0, 420px);
}
.op-cancellation-auth-field--inline {
align-items: center;
column-gap: .55rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
}
.op-cancellation-auth-field--inline > span {
margin: 0;
white-space: nowrap;
}
.op-cancellation-auth-field--inline input[name="superior_pin"] {
max-width: 12rem;
}
@media (max-width: 780px) {
.op-cancellation-modal-card {
width: min(96vw, 860px);
}
.op-cancellation-item-row--priced {
grid-template-columns: auto minmax(0, 1fr);
}
.op-cancellation-item-price {
grid-column: 2;
justify-items: start;
min-width: 0;
text-align: left;
}
.op-cancellation-auth-inline {
grid-template-columns: 1fr;
}
.op-cancellation-auth-field--inline {
grid-template-columns: 1fr;
}
.op-cancellation-auth-field--inline input[name="superior_pin"] {
max-width: 100%;
}
}
/* PATCH 137 / 137A · Depósitos administrativos y matriz de recaudación */
.op-collection-deposit-summary {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.op-collection-deposit-table td,
.op-collection-deposit-table th {
vertical-align: top;
}
.op-collection-deposit-table td > span,
.op-collection-deposit-table td > small {
display: block;
}
.op-collection-deposit-table td > small {
color: var(--op-muted);
font-size: .68rem;
margin-top: .14rem;
}
.op-collection-allocation-line {
display: block;
font-size: .72rem;
white-space: nowrap;
}
.op-collection-deposit-preview {
justify-content: space-between;
}
.op-collection-matrix-card {
overflow: hidden;
}
.op-collection-matrix-balance {
align-items: flex-end;
display: grid;
gap: .1rem;
justify-items: end;
text-align: right;
}
.op-collection-matrix-balance span {
color: var(--op-muted);
font-size: .72rem;
}
.op-collection-matrix-balance strong {
font-size: 1.45rem;
font-variant-numeric: tabular-nums;
}
.op-collection-matrix-scroll {
max-width: 100%;
overflow-x: auto;
}
.op-collection-matrix-table {
min-width: 980px;
width: max-content;
}
.op-collection-matrix-table th,
.op-collection-matrix-table td {
font-size: .7rem;
min-width: 82px;
padding: .48rem .52rem;
text-align: right;
white-space: nowrap;
}
.op-collection-matrix-table th:first-child,
.op-collection-matrix-table td:first-child {
left: 0;
min-width: 260px;
position: sticky;
text-align: left;
z-index: 2;
}
.op-collection-matrix-table thead th:first-child {
background: #eef2f7;
z-index: 4;
}
.op-collection-matrix-table tbody td:first-child {
background: var(--op-surface);
}
.op-collection-matrix-section td {
background: #e8eef7 !important;
color: var(--op-text);
font-size: .68rem;
font-weight: 650;
letter-spacing: .04em;
text-align: left !important;
}
.op-collection-matrix-emphasis td {
background: rgba(18, 128, 92, .06);
}
.op-collection-matrix-result td {
background: rgba(6, 37, 91, .08) !important;
font-size: .78rem;
font-weight: 700;
}
.op-collection-matrix-table small {
color: var(--op-muted);
display: block;
font-size: .58rem;
line-height: 1.3;
max-width: 160px;
white-space: normal;
}
@media (max-width: 820px) {
.op-collection-deposit-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-collection-matrix-balance {
justify-items: start;
text-align: left;
}
}
/* PATCH 137A-R2 · política económica por componente y simulación promocional */
.op-promo-economy-examples {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-promo-economy-examples > div {
background: rgba(248, 250, 252, .82);
border: 1px solid rgba(15, 23, 42, .10);
border-radius: 16px;
display: grid;
gap: 5px;
padding: 13px 14px;
}
.op-promo-economy-examples strong {
color: var(--op-primary, #06183a);
font-size: .92rem;
}
.op-promo-economy-examples small,
.op-promo-component-main label > small {
color: rgba(15, 23, 42, .58);
display: block;
font-size: .74rem;
line-height: 1.4;
margin-top: 6px;
}
.op-promo-economy-simulator {
background: rgba(248, 250, 252, .86);
border: 1px solid rgba(15, 23, 42, .12);
border-radius: 18px;
margin-top: 14px;
padding: 14px;
transition: border-color .18s ease, background .18s ease;
}
.op-promo-economy-simulator-head {
align-items: flex-start;
display: flex;
gap: 12px;
justify-content: space-between;
}
.op-promo-economy-simulator-head h4 {
color: var(--op-primary, #06183a);
font-size: 1rem;
margin: 0;
}
.op-promo-economy-state {
background: rgba(148, 163, 184, .16);
border-radius: 999px;
color: rgba(15, 23, 42, .66);
font-size: .70rem;
font-weight: 900;
letter-spacing: .04em;
padding: 7px 10px;
text-transform: uppercase;
white-space: nowrap;
}
.op-promo-economy-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 12px;
}
.op-promo-economy-grid > div {
background: #fff;
border: 1px solid rgba(15, 23, 42, .09);
border-radius: 14px;
display: grid;
gap: 4px;
padding: 10px 11px;
}
.op-promo-economy-grid span {
color: rgba(15, 23, 42, .56);
font-size: .68rem;
font-weight: 800;
letter-spacing: .025em;
text-transform: uppercase;
}
.op-promo-economy-grid strong {
color: var(--op-primary, #06183a);
font-size: .88rem;
}
.op-promo-economy-message {
border-radius: 12px;
color: rgba(15, 23, 42, .68);
font-size: .78rem;
font-weight: 700;
line-height: 1.42;
margin-top: 10px;
padding: 9px 10px;
}
.op-promo-economy-simulator.is-ready {
background: rgba(22, 163, 74, .055);
border-color: rgba(22, 163, 74, .24);
}
.op-promo-economy-simulator.is-ready .op-promo-economy-state {
background: rgba(22, 163, 74, .13);
color: #047857;
}
.op-promo-economy-simulator.is-warning {
background: rgba(245, 158, 11, .055);
border-color: rgba(245, 158, 11, .26);
}
.op-promo-economy-simulator.is-warning .op-promo-economy-state {
background: rgba(245, 158, 11, .14);
color: #92400e;
}
.op-promo-economy-simulator.is-error {
background: rgba(180, 35, 24, .055);
border-color: rgba(180, 35, 24, .30);
}
.op-promo-economy-simulator.is-error .op-promo-economy-state,
.op-promo-economy-simulator.is-error .op-promo-economy-message {
color: var(--op-danger, #b42318);
}
@media (max-width: 1100px) {
.op-promo-economy-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.op-promo-economy-examples,
.op-promo-economy-grid {
grid-template-columns: 1fr;
}
.op-promo-economy-simulator-head {
align-items: stretch;
flex-direction: column;
}
.op-promo-economy-state {
align-self: flex-start;
white-space: normal;
}
}
.op-promotion-pricing-role {
border-radius: 999px;
display: inline-flex;
font-size: .62rem;
font-weight: 900;
letter-spacing: .035em;
line-height: 1.15;
padding: 5px 8px;
text-transform: uppercase;
}
.op-promotion-pricing-role.is-protected {
background: rgba(14, 116, 144, .11);
color: #0e7490;
}
.op-promotion-pricing-role.is-discountable {
background: rgba(22, 163, 74, .11);
color: #047857;
}
@media (max-width: 720px) {
.op-promotion-pricing-role {
align-self: flex-start;
}
}
/* PATCH 148A · Comanda de Mesa y cartillas de Caja compactas */
.op-comanda-hero {
min-height: 88px;
padding: 14px 20px;
border-radius: 22px 22px 8px 8px;
}
.op-comanda-hero-main {
gap: 14px;
}
.op-comanda-menu {
width: 50px;
height: 50px;
flex-basis: 50px;
border-radius: 15px;
font-size: 1.75rem;
}
.op-comanda-back {
font-size: 2rem;
}
.op-comanda-hero-kicker {
margin-bottom: 1px;
font-size: .68rem;
}
.op-comanda-hero h1 {
font-size: clamp(2.1rem, 4vw, 3.35rem);
line-height: .92;
}
.op-comanda-hero p {
margin-top: 4px;
font-size: .9rem;
}
.op-comanda-hero-meta {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .42rem;
}
.op-comanda-hero-meta > span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: .22rem .48rem;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: rgba(255, 255, 255, .09);
color: rgba(255, 255, 255, .86);
font-size: .62rem;
font-weight: 780;
letter-spacing: .015em;
white-space: nowrap;
}
.op-comanda-hero-status {
min-width: min(260px, 36vw);
gap: 10px;
padding: 10px 13px;
border-radius: 16px;
}
.op-comanda-check {
width: 34px;
height: 34px;
flex-basis: 34px;
font-size: 1.05rem;
}
.op-comanda-hero-status strong {
font-size: .9rem;
}
.op-comanda-hero-status small {
font-size: .7rem;
}
.op-comanda-screen {
gap: 10px;
}
.op-comanda-summary {
display: flex;
flex-direction: column;
}
.op-comanda-summary > .op-comanda-summary-head { order: 0; }
.op-comanda-summary > .op-comanda-account-box { order: 1; }
.op-comanda-summary > .op-comanda-current-order,
.op-comanda-summary > .op-comanda-actions-stack,
.op-comanda-summary > .op-comanda-payment-card { order: 2; }
.op-comanda-summary > .op-sent-confirmation-card { order: 3; }
.op-comanda-summary > .op-table-bulk-delivery-card { order: 4; }
.op-comanda-summary > .op-comanda-sent-summary { order: 5; }
.op-comanda-summary > .op-empty-release-form,
.op-comanda-summary > .op-paid-release-card { order: 6; }
.op-comanda-summary > .op-comanda-tools-panel { order: 7; }
.op-comanda-summary > .op-comanda-sent-orders { order: 8; }
.op-comanda-current-order {
border: 1px solid rgba(6, 87, 184, .16);
box-shadow: 0 10px 24px rgba(6, 87, 184, .07);
}
.op-comanda-tools-panel > summary,
.op-comanda-sent-orders > summary {
min-height: 46px;
}
.op-standalone-operational-summary.is-cashier {
gap: .3rem;
margin-top: .48rem;
padding: .58rem .68rem;
}
.op-standalone-operational-primary {
display: block;
color: #172033;
font-size: .9rem;
font-weight: 920;
line-height: 1.16;
overflow-wrap: anywhere;
}
.op-cashier-order-card-head-v3 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
align-items: start;
}
.op-cashier-money-strip-v4 {
display: grid;
grid-template-columns: repeat(3, minmax(70px, 1fr));
gap: .35rem;
min-width: 245px;
}
.op-cashier-money-strip-v4 > article {
min-width: 0;
display: grid;
gap: .18rem;
padding: .55rem .58rem;
border: 1px solid rgba(20, 33, 61, .07);
border-radius: .8rem;
background: rgba(248, 250, 252, .96);
}
.op-cashier-money-strip-v4 > article.is-balance {
background: rgba(180, 35, 24, .055);
border-color: rgba(180, 35, 24, .11);
}
.op-cashier-money-strip-v4 span {
color: #64748b;
font-size: .56rem;
font-weight: 850;
letter-spacing: .045em;
text-transform: uppercase;
white-space: nowrap;
}
.op-cashier-money-strip-v4 strong {
color: #172033;
font-size: .86rem;
font-weight: 860;
line-height: 1;
white-space: nowrap;
}
.op-cashier-money-strip-v4 .is-balance strong {
color: #991b1b;
font-size: .98rem;
}
.op-cashier-visual-blocks-v4 {
gap: .48rem;
}
.op-cashier-promo-block-v4 {
display: grid;
gap: .52rem;
padding: .62rem;
border: 1px solid #c4b5fd;
border-radius: .85rem;
background: linear-gradient(145deg, #faf5ff 0%, #ffffff 76%);
}
.op-cashier-promo-block-v4 > header {
display: flex;
justify-content: space-between;
gap: .5rem;
align-items: start;
}
.op-cashier-promo-block-v4 > header > div {
display: grid;
gap: .06rem;
}
.op-cashier-promo-block-v4 > header span {
color: #7e22ce;
font-size: .55rem;
font-weight: 950;
letter-spacing: .08em;
}
.op-cashier-promo-block-v4 > header strong {
color: #3b0764;
font-size: .82rem;
font-weight: 950;
line-height: 1.15;
overflow-wrap: anywhere;
}
.op-cashier-promo-block-v4 > header small {
color: #64748b;
font-size: .56rem;
font-weight: 800;
}
.op-cashier-promo-items-v4 {
display: grid;
gap: .32rem;
}
.op-cashier-promo-items-v4 > div {
display: grid;
gap: .08rem;
padding: .42rem .48rem;
border-radius: .62rem;
background: rgba(255, 255, 255, .86);
border: 1px solid rgba(124, 58, 237, .09);
}
.op-cashier-promo-items-v4 strong {
color: #172033;
font-size: .82rem;
line-height: 1.2;
}
.op-cashier-promo-items-v4 em {
color: #64748b;
font-size: .68rem;
font-style: normal;
}
.op-cashier-promo-items-v4 mark {
width: fit-content;
padding: .12rem .3rem;
border-radius: .38rem;
background: #fef3c7;
color: #92400e;
font-size: .62rem;
font-weight: 800;
}
.op-cashier-promo-block-v4 > footer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .35rem;
}
.op-cashier-promo-block-v4 > footer > span {
display: grid;
gap: .08rem;
padding: .38rem;
border-radius: .58rem;
background: rgba(255, 255, 255, .88);
}
.op-cashier-promo-block-v4 > footer > span.is-promo-price {
background: rgba(124, 58, 237, .09);
}
.op-cashier-promo-block-v4 > footer small {
color: #64748b;
font-size: .49rem;
font-weight: 850;
text-transform: uppercase;
}
.op-cashier-promo-block-v4 > footer b {
color: #172033;
font-size: .66rem;
white-space: nowrap;
}
.op-cashier-promo-block-v4 > footer .is-promo-price b {
color: #6d28d9;
font-weight: 950;
}
.op-cashier-promo-block-v4 > p {
margin: 0;
color: #92400e;
font-size: .52rem;
font-weight: 850;
}
@media (max-width: 1180px) {
.op-comanda-summary {
order: -1;
}
}
@media (max-width: 760px) {
.op-comanda-hero {
gap: 10px;
}
.op-comanda-hero-meta {
gap: .25rem;
}
.op-comanda-hero-status {
width: 100%;
min-width: 0;
}
.op-cashier-order-card-head-v3 {
grid-template-columns: 1fr;
}
.op-cashier-money-strip-v4 {
min-width: 0;
width: 100%;
}
}
@media (max-width: 420px) {
.op-cashier-money-strip-v4,
.op-cashier-promo-block-v4 > footer {
grid-template-columns: 1fr;
}
.op-cashier-money-strip-v4 > article {
grid-template-columns: 1fr auto;
align-items: center;
}
}
/* PATCH 148B · salida segura de borradores standalone */
.op-comanda-back-form,
.op-comanda-action-form {
display: inline-flex;
margin: 0;
}
.op-comanda-back-form .op-comanda-back,
.op-comanda-action-form .op-btn {
font: inherit;
}
/* PATCH 148C · agrupación visual configurable del catálogo */
.op-pos-visual-group-settings {
margin-top: 1rem;
display: grid;
gap: 1rem;
}
.op-pos-catalog-subgroup {
display: grid;
gap: .7rem;
margin-top: .9rem;
}
.op-pos-catalog-subgroup + .op-pos-catalog-subgroup {
padding-top: 1rem;
border-top: 1px solid var(--op-border, #dde2ea);
}
.op-pos-catalog-subgroup-title {
display: flex;
align-items: center;
gap: .5rem;
margin: 0;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--op-muted, #667085);
}
/* PANEL-GERENCIAL-01-R1 · foco exacto de alertas gerenciales */
.op-table tbody tr.op-row-highlight,
.op-table tbody tr:target {
scroll-margin-top: 1.5rem;
}
.op-table tbody tr.op-row-highlight > td,
.op-table tbody tr:target > td {
animation: op-management-alert-row-focus 2.8s ease-out both;
}
@keyframes op-management-alert-row-focus {
0%, 38% {
background: #fff1ec;
box-shadow: inset 4px 0 0 #bd171d;
}
100% {
background: transparent;
box-shadow: inset 0 0 0 transparent;
}
}
/* WIZARD-PROMOCIONES-01-R1 · administración guiada sin alterar POS */
.op-promo-wizard-form {
--promo-wizard-accent: var(--op-primary, #4f46e5);
--promo-wizard-soft: color-mix(in srgb, var(--promo-wizard-accent) 8%, white);
--promo-wizard-line: var(--op-border, #d9dee8);
display: grid;
gap: 1rem;
min-width: 0;
}
.op-promo-wizard-form.is-embedded {
border: 0;
box-shadow: none;
padding: 0;
background: transparent;
}
.op-promo-wizard-progress {
display: grid;
grid-template-columns: repeat(8, minmax(72px, 1fr));
gap: .35rem;
overflow-x: auto;
padding: .15rem 0 .5rem;
scrollbar-width: thin;
}
.op-promo-wizard-progress-step {
appearance: none;
border: 1px solid var(--promo-wizard-line);
background: var(--op-surface, #fff);
color: var(--op-muted, #667085);
border-radius: .75rem;
min-height: 58px;
padding: .5rem .45rem;
display: grid;
grid-template-columns: 26px 1fr;
align-items: center;
gap: .4rem;
text-align: left;
cursor: pointer;
font: inherit;
}
.op-promo-wizard-progress-step > span {
width: 26px;
height: 26px;
border-radius: 999px;
display: inline-grid;
place-items: center;
border: 1px solid currentColor;
font-size: .72rem;
font-weight: 700;
}
.op-promo-wizard-progress-step > small {
font-size: .67rem;
line-height: 1.15;
font-weight: 650;
}
.op-promo-wizard-progress-step.is-active {
border-color: var(--promo-wizard-accent);
background: var(--promo-wizard-soft);
color: var(--promo-wizard-accent);
}
.op-promo-wizard-progress-step.is-complete {
color: var(--op-text, #101828);
background: var(--op-surface-subtle, #f7f8fa);
}
.op-promo-wizard-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
gap: 1rem;
align-items: start;
}
.op-promo-wizard-main,
.op-promo-wizard-step {
min-width: 0;
}
.op-promo-wizard-step-head {
margin-bottom: 1rem;
}
.op-promo-wizard-step-head h2 {
margin: .15rem 0 .35rem;
font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.op-promo-wizard-step-head > p:last-child {
margin: 0;
color: var(--op-muted, #667085);
max-width: 76ch;
}
.op-promo-wizard-summary {
position: sticky;
top: 1rem;
border: 1px solid var(--promo-wizard-line);
border-radius: 1rem;
background: var(--op-surface, #fff);
padding: 1rem;
box-shadow: 0 10px 28px rgba(16, 24, 40, .07);
min-width: 0;
}
.op-promo-wizard-summary h3 {
margin: .15rem 0 .85rem;
overflow-wrap: anywhere;
}
.op-promo-wizard-summary dl {
margin: 0;
display: grid;
gap: .65rem;
}
.op-promo-wizard-summary dl > div {
border-top: 1px solid var(--promo-wizard-line);
padding-top: .55rem;
}
.op-promo-wizard-summary dt {
color: var(--op-muted, #667085);
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .06em;
}
.op-promo-wizard-summary dd {
margin: .15rem 0 0;
font-size: .82rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.op-promo-wizard-summary [data-op-summary-components] {
display: grid;
gap: .25rem;
}
.op-promo-summary-safety,
.op-promo-publish-note,
.op-promo-rule-note {
margin-top: .85rem;
border-radius: .75rem;
background: var(--op-surface-subtle, #f7f8fa);
padding: .7rem .8rem;
display: grid;
gap: .15rem;
}
.op-promo-summary-safety strong,
.op-promo-publish-note strong,
.op-promo-rule-note strong {
font-size: .68rem;
letter-spacing: .06em;
}
.op-promo-summary-safety span,
.op-promo-publish-note span,
.op-promo-rule-note span {
color: var(--op-muted, #667085);
font-size: .78rem;
line-height: 1.4;
}
.op-promo-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
.op-promo-choice-card {
display: flex;
align-items: flex-start;
gap: .65rem;
border: 1px solid var(--promo-wizard-line);
border-radius: .9rem;
padding: .85rem;
cursor: pointer;
background: var(--op-surface, #fff);
}
.op-promo-choice-card:has(input:checked) {
border-color: var(--promo-wizard-accent);
box-shadow: inset 0 0 0 1px var(--promo-wizard-accent);
background: var(--promo-wizard-soft);
}
.op-promo-choice-card input {
margin-top: .18rem;
flex: 0 0 auto;
}
.op-promo-choice-card > span {
display: grid;
gap: .2rem;
min-width: 0;
}
.op-promo-choice-card strong {
font-size: .82rem;
}
.op-promo-choice-card small {
color: var(--op-muted, #667085);
line-height: 1.35;
}
.op-promo-apply-count {
display: flex;
align-items: end;
gap: .55rem;
flex-wrap: wrap;
padding-bottom: .2rem;
}
.op-promo-apply-count small {
color: var(--op-muted, #667085);
}
.op-promo-component-position {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .65rem;
margin-bottom: .65rem;
}
.op-promo-component-position > strong {
text-align: center;
font-size: .85rem;
}
.op-promo-component {
margin-top: 0;
border: 1px solid var(--promo-wizard-line);
}
.op-promo-component-head {
display: flex;
justify-content: space-between;
gap: .8rem;
align-items: flex-start;
border-bottom: 1px solid var(--promo-wizard-line);
padding-bottom: .8rem;
margin-bottom: .8rem;
}
.op-promo-component-head > div:first-child {
display: grid;
grid-template-columns: auto 1fr;
gap: .1rem .55rem;
align-items: center;
}
.op-promo-component-head > div:first-child small {
grid-column: 2;
color: var(--op-muted, #667085);
line-height: 1.35;
}
.op-promo-component-number,
.op-promo-question-number {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: var(--promo-wizard-soft);
color: var(--promo-wizard-accent);
font-size: .72rem;
font-weight: 750;
}
.op-promo-component-actions {
display: flex;
gap: .4rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.op-promo-component-status {
border-radius: 999px;
background: var(--op-surface-subtle, #f2f4f7);
color: var(--op-muted, #667085);
padding: .28rem .5rem;
font-size: .68rem;
font-weight: 700;
}
.op-promo-component-status.is-ready {
background: #eaf8ef;
color: #176b35;
}
.op-promo-question-block {
border-top: 1px solid var(--promo-wizard-line);
padding-top: .85rem;
margin-top: .85rem;
}
.op-promo-question-head > div {
display: flex;
gap: .6rem;
align-items: flex-start;
margin-bottom: .55rem;
}
.op-promo-question-head > div > div {
display: grid;
gap: .12rem;
}
.op-promo-question-head small,
.op-promo-field-help {
color: var(--op-muted, #667085);
line-height: 1.35;
}
.op-promo-question-block > select,
.op-promo-question-block [data-op-promo-variant-picker] > select,
.op-promo-question-block [data-op-promo-flavor-picker] > select {
width: 100%;
min-height: 150px;
}
.op-promo-inline-choice {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: .55rem;
}
.op-promo-inline-choice label {
border: 1px solid var(--promo-wizard-line);
border-radius: 999px;
padding: .42rem .65rem;
display: inline-flex;
gap: .35rem;
align-items: center;
cursor: pointer;
font-size: .75rem;
}
.op-promo-inline-choice label:has(input:checked) {
border-color: var(--promo-wizard-accent);
background: var(--promo-wizard-soft);
color: var(--promo-wizard-accent);
}
.op-promo-advanced-block {
margin-top: .85rem;
border: 1px dashed var(--promo-wizard-line);
border-radius: .75rem;
padding: .65rem .75rem;
}
.op-promo-advanced-block > summary {
cursor: pointer;
font-size: .78rem;
font-weight: 650;
}
.op-promo-component-summary {
margin-top: .85rem;
border-radius: .7rem;
padding: .7rem .8rem;
background: var(--op-surface-subtle, #f7f8fa);
font-size: .78rem;
line-height: 1.45;
}
.op-promo-economy-simulator {
border: 1px solid var(--promo-wizard-line);
border-radius: .9rem;
padding: .9rem;
background: var(--op-surface, #fff);
}
.op-promo-economy-simulator-head {
display: flex;
gap: .8rem;
align-items: center;
justify-content: space-between;
}
.op-promo-economy-simulator-head h3 {
margin: .1rem 0 0;
}
.op-promo-economy-state {
border-radius: 999px;
padding: .3rem .55rem;
background: var(--op-surface-subtle, #f2f4f7);
font-size: .7rem;
font-weight: 700;
}
.op-promo-economy-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .5rem;
margin-top: .75rem;
}
.op-promo-economy-grid > div {
border: 1px solid var(--promo-wizard-line);
border-radius: .65rem;
padding: .55rem;
display: grid;
gap: .2rem;
}
.op-promo-economy-grid span {
color: var(--op-muted, #667085);
font-size: .66rem;
text-transform: uppercase;
}
.op-promo-economy-grid strong {
font-size: .85rem;
}
.op-promo-economy-message {
margin-top: .65rem;
color: var(--op-muted, #667085);
font-size: .76rem;
line-height: 1.4;
}
.op-promo-economy-simulator.is-error {
border-color: #d92d20;
}
.op-promo-economy-simulator.is-warning {
border-color: #dc8a00;
}
.op-promo-economy-simulator.is-ready {
border-color: #38a169;
}
.op-promo-final-review {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
.op-promo-final-review > div {
border: 1px solid var(--promo-wizard-line);
border-radius: .7rem;
padding: .7rem;
display: grid;
gap: .2rem;
}
.op-promo-final-review span {
color: var(--op-muted, #667085);
font-size: .68rem;
text-transform: uppercase;
}
.op-promo-final-review strong {
font-size: .82rem;
line-height: 1.4;
}
.op-promo-final-review-wide {
grid-column: 1 / -1;
}
.op-promo-wizard-error {
border: 1px solid #d92d20;
background: #fff2f0;
color: #9f1d16;
border-radius: .75rem;
padding: .7rem .85rem;
font-size: .8rem;
font-weight: 650;
}
.op-promo-wizard-actions {
z-index: 3;
gap: .5rem;
}
@media (max-width: 1050px) {
.op-promo-wizard-layout {
grid-template-columns: 1fr;
}
.op-promo-wizard-summary {
position: static;
order: -1;
}
.op-promo-wizard-summary dl {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-promo-economy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.op-promo-choice-grid,
.op-promo-final-review,
.op-promo-wizard-summary dl,
.op-promo-economy-grid {
grid-template-columns: 1fr;
}
.op-promo-component-position {
grid-template-columns: 1fr 1fr;
}
.op-promo-component-position > strong {
grid-column: 1 / -1;
grid-row: 1;
}
.op-promo-component-head,
.op-promo-economy-simulator-head {
flex-direction: column;
align-items: stretch;
}
.op-promo-component-actions {
justify-content: flex-start;
}
.op-promo-wizard-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.op-promo-wizard-actions .op-btn {
width: 100%;
}
}
/* PROMOCIONES-WIZARD-ADMIN-01-R1-HF1 · jerarquía comercial, radios compactos y presentación única */
.op-promo-wizard-form [hidden] {
display: none !important;
}
.op-promo-wizard-form .op-promo-choice-card {
min-height: 76px;
padding: .72rem .78rem;
align-items: center;
}
.op-promo-wizard-form .op-promo-choice-card > input[type="radio"],
.op-promo-wizard-form .op-promo-inline-choice input[type="radio"] {
appearance: auto;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 20px;
box-shadow: none !important;
}
.op-promo-wizard-form .op-promo-choice-card:has(input:checked) {
border-width: 1.5px;
}
.op-promo-component-count-row {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto minmax(210px, .72fr);
gap: .8rem;
align-items: end;
}
.op-promo-component-count-row > label {
display: grid;
gap: .38rem;
}
.op-promo-component-count-row > .op-btn {
min-height: 44px;
align-self: end;
}
.op-promo-count-feedback {
min-height: 44px;
display: flex;
align-items: center;
padding: .55rem .75rem;
border: 1px solid var(--promo-wizard-line);
border-radius: .72rem;
background: var(--op-surface-subtle, #f7f8fa);
color: var(--op-muted, #667085);
font-size: .76rem;
font-weight: 750;
line-height: 1.3;
}
.op-promo-count-feedback[data-state="applied"] {
border-color: rgba(22, 163, 74, .28);
background: rgba(22, 163, 74, .09);
color: #176b35;
font-weight: 850;
}
.op-promo-count-feedback[data-state="pending"] {
border-color: rgba(220, 138, 0, .3);
background: rgba(255, 247, 237, .9);
color: #92400e;
}
.op-promo-technical-select {
display: none !important;
}
.op-promo-question-block-first {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.op-promo-question-block > select:not(.op-promo-technical-select),
.op-promo-question-block [data-op-promo-smart-variant] {
width: 100%;
}
.op-promo-question-block [data-op-promo-family],
.op-promo-question-block [data-op-promo-smart-variant] {
min-height: 44px;
border: 1px solid var(--promo-wizard-line);
border-radius: .72rem;
background: var(--op-surface, #fff);
padding: .55rem .7rem;
color: var(--op-text, #101828);
font: inherit;
}
.op-promo-question-block [data-op-promo-products],
.op-promo-question-block [data-op-promo-flavors] {
min-height: 138px;
border: 1px solid var(--promo-wizard-line);
border-radius: .72rem;
padding: .35rem;
background: var(--op-surface, #fff);
}
.op-promo-variant-hint,
.op-promo-legacy-note {
margin-top: .55rem;
border-radius: .72rem;
padding: .65rem .75rem;
font-size: .76rem;
line-height: 1.4;
}
.op-promo-variant-hint {
border: 1px solid rgba(217, 45, 32, .22);
background: #fff5f4;
color: #9f1d16;
font-weight: 650;
}
.op-promo-legacy-note {
border: 1px solid rgba(124, 58, 237, .20);
background: rgba(124, 58, 237, .06);
display: grid;
gap: .18rem;
}
.op-promo-legacy-note strong {
color: #6d28d9;
font-size: .69rem;
letter-spacing: .05em;
}
.op-promo-legacy-note span {
color: var(--op-muted, #667085);
}
.op-promo-component-status.is-legacy {
background: rgba(124, 58, 237, .10);
color: #6d28d9;
}
.op-promo-component-commercial-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .8rem;
}
.op-promo-component-commercial-grid label {
min-width: 0;
}
.op-promo-component-commercial-grid label > small,
[data-op-promo-price-range-help] {
display: block;
margin-top: .35rem;
color: var(--op-muted, #667085);
font-size: .74rem;
line-height: 1.35;
}
.op-promo-wizard-summary [data-op-summary-components] span {
display: block;
padding: .36rem 0;
border-bottom: 1px dashed rgba(102, 112, 133, .22);
line-height: 1.35;
}
.op-promo-wizard-summary [data-op-summary-components] span:last-child {
border-bottom: 0;
}
.op-promo-final-review-wide strong {
display: block;
line-height: 1.55;
}
.op-promo-wizard-form .op-promo-inline-choice label {
min-height: 38px;
}
@media (max-width: 900px) {
.op-promo-component-count-row {
grid-template-columns: 1fr auto;
}
.op-promo-count-feedback {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.op-promo-component-count-row,
.op-promo-component-commercial-grid {
grid-template-columns: 1fr;
}
.op-promo-component-count-row > .op-btn,
.op-promo-count-feedback {
width: 100%;
grid-column: auto;
}
}
.op-promo-legacy-inferred {
margin-top: .55rem;
border: 1px solid rgba(124, 58, 237, .16);
border-radius: .68rem;
background: rgba(124, 58, 237, .045);
padding: .55rem .65rem;
display: grid;
gap: .18rem;
}
.op-promo-legacy-inferred strong {
color: #6d28d9;
font-size: .64rem;
letter-spacing: .05em;
}
.op-promo-legacy-inferred span {
color: var(--op-muted, #667085);
font-size: .76rem;
line-height: 1.35;
}
/* HF1 · opciones comerciales múltiples (sabores/tipos) separadas de presentaciones */
.op-promo-question-block [data-op-promo-smart-options] {
width: 100%;
min-height: 138px;
border: 1px solid var(--promo-wizard-line);
border-radius: .72rem;
padding: .35rem;
background: var(--op-surface, #fff);
color: var(--op-text, #101828);
font: inherit;
}
/* PROMOCIONES-WIZARD-ADMIN-01-R1-HF2 · refinamiento visual final post-validación */
.op-promo-wizard-form .op-promo-choice-card > input[type="radio"],
.op-promo-wizard-form .op-promo-inline-choice input[type="radio"] {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
flex-basis: 15px;
}
/* Paso 3 · las dos decisiones de estructura se comparan mejor en vertical. */
.op-promo-wizard-form .op-promo-choice-grid-kind {
grid-template-columns: 1fr;
gap: .65rem;
}
.op-promo-wizard-form .op-promo-choice-grid-kind .op-promo-choice-card {
min-height: 68px;
}