/* ============================================================ OrdenVeloz POS — Sistema de diseño Minimalista, alto contraste, botones grandes (3ra edad), responsive (celular de mesero → pantalla de caja/cocina). ============================================================ */ :root { --bg: #f4f5f7; --surface: #ffffff; --surface-2: #fafbfc; --ink: #15181d; --muted: #6b7280; --border: #e6e8ec; --accent: #0d9f6e; --accent-ink: #ffffff; --accent-soft: #e2f6ee; --success: #1a9b53; --success-soft: #e3f4ea; --warn: #c47700; --warn-soft: #faefd8; --danger: #d83b3b; --danger-soft: #fae4e4; --info: #2563c9; --info-soft: #e4edfb; /* "chip" oscuro (pastilla activa / avatar / toast): fondo oscuro, texto claro. */ --chip-bg: var(--ink); --chip-ink: #ffffff; --hover: #eef0f3; /* gris de hover para filas/categorias */ --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(20, 24, 31, 0.04), 0 6px 20px rgba(20, 24, 31, 0.06); --shadow-lg: 0 12px 40px rgba(20, 24, 31, 0.16); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --tap: 56px; /* alto minimo tactil */ } /* ============ Tema oscuro ============ Se activa con (lo pone el script del y el interruptor). Solo redefine la paleta; el resto del CSS usa variables y se adapta solo. */ :root[data-theme="dark"] { --bg: #10122e; /* índigo profundo */ --surface: #1a1c42; /* índigo */ --surface-2: #22254f; --ink: #e9eafc; /* blanco con tinte violeta */ --muted: #a1a4cf; --border: #313467; --accent: #10b981; /* verde esmeralda: resalta sobre el índigo */ --accent-ink: #ffffff; --accent-soft: #103a2c; /* fondo suave del acento (verde profundo) */ --success: #35c874; --success-soft: #163524; --warn: #e4ad45; --warn-soft: #362b14; --danger: #f06a6a; --danger-soft: #3c2030; --info: #6c8cf5; --info-soft: #1e2952; /* Chip invertido: en oscuro es una pastilla clara con texto oscuro (resalta bien). */ --chip-bg: #e9eafc; --chip-ink: #15162e; --hover: #2a2d5c; --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(8, 8, 32, 0.5); --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.4; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } /* color: inherit evita que los botones nativos usen el negro por defecto del navegador (que en modo oscuro quedaba invisible). Los botones con su propia clase de color (btn-primary, etc.) lo siguen sobrescribiendo. */ button { font-family: inherit; cursor: pointer; color: inherit; } input, select, textarea { font-family: inherit; font-size: 17px; color: var(--ink); } option { color: var(--ink); background: var(--surface); } [data-lucide] { width: 22px; height: 22px; stroke-width: 2; vertical-align: middle; } .hidden { display: none !important; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 600; transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn[disabled] { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-success { background: var(--success); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; border-color: var(--border); } .btn-outline { background: var(--surface); border-color: var(--border); } .btn-lg { min-height: 64px; font-size: 19px; padding: 0 28px; } .btn-block { width: 100%; } .btn-icon { min-height: 48px; min-width: 48px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); } /* Interruptor de tema (claro/oscuro) en el encabezado */ .theme-toggle { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .theme-toggle:hover { background: var(--hover); color: var(--ink); } .theme-toggle [data-lucide] { width: 20px; height: 20px; } /* ---------- Campos ---------- */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .field label { font-weight: 600; font-size: 15px; color: var(--muted); } .input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 0 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); outline: none; transition: border-color 0.15s ease; } .textarea { padding: 14px 16px; min-height: 90px; resize: vertical; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); } /* ---------- Tags / chips de estado ---------- */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; } .tag [data-lucide] { width: 15px; height: 15px; } .tag-open { background: var(--info-soft); color: var(--info); } .tag-preparing { background: var(--warn-soft); color: var(--warn); } .tag-ready { background: var(--success-soft); color: var(--success); } .tag-paid { background: var(--hover); color: var(--muted); } .tag-cancelled { background: var(--danger-soft); color: var(--danger); } /* ============================================================ LOGIN ============================================================ */ .login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, #2a2f37 0%, #15181d 60%); } .login-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 26px; padding: 34px 30px 30px; box-shadow: var(--shadow-lg); flex-shrink: 0; } /* En celular el login ocupa toda la pantalla, sin marco oscuro alrededor */ @media (max-width: 900px) { .login { padding: 0; gap: 0; background: var(--surface); align-items: stretch; } .login-card { max-width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; } } /* Panel de bienvenida (solo en computadora) */ .login-hero { display: none; color: #fff; max-width: 460px; } .login-hero .hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .login-hero .hero-brand .mark { width: 58px; height: 58px; border-radius: 16px; background: var(--accent); color: #fff; display: grid; place-items: center; } .login-hero .hero-brand .mark [data-lucide] { width: 32px; height: 32px; } .login-hero .hero-brand b { font-size: 28px; font-weight: 800; letter-spacing: -0.6px; } .login-hero h2 { font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin-bottom: 16px; } .login-hero p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin-bottom: 30px; } .login-hero ul { list-style: none; display: flex; flex-direction: column; gap: 16px; } .login-hero li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; } .login-hero li .hi { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: rgba(255, 255, 255, 0.08); color: var(--accent); display: grid; place-items: center; } .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .login-brand .mark { width: 46px; height: 46px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; } .login-brand .mark [data-lucide] { width: 26px; height: 26px; } .login-brand h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; } .login-sub { color: var(--muted); font-size: 15px; margin: 6px 0 24px; } .pin-display { display: flex; gap: 12px; justify-content: center; margin: 8px 0 20px; } .pin-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); transition: all 0.15s ease; } .pin-dot.filled { background: var(--accent); border-color: var(--accent); } /* Por defecto (celular/tablet): teclado en pantalla visible, campo de texto oculto */ .pin-desktop { display: none; } .pin-touch { display: block; } .pin-touch-label { font-weight: 600; font-size: 15px; color: var(--muted); display: block; } /* Campo de PIN para computadora */ .pin-input-wrap { position: relative; } .pin-input-wrap .input { padding-right: 52px; letter-spacing: 3px; font-weight: 700; } .pin-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: transparent; color: var(--muted); display: grid; place-items: center; border-radius: 10px; } .pin-eye:hover { background: var(--surface-2); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .keypad button { height: 68px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface-2); font-size: 26px; font-weight: 700; color: var(--ink); transition: transform 0.06s ease, background 0.12s ease; } .keypad button:active { transform: scale(0.94); background: var(--accent-soft); } .keypad button.muted { background: transparent; border-color: transparent; } .login-user-row { display: flex; gap: 10px; margin-bottom: 18px; } .login-error { color: var(--danger); font-weight: 600; text-align: center; min-height: 22px; margin-top: 6px; } .demo-hint { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); text-align: center; } .demo-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; } .demo-chips button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--ink); } .remember { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; cursor: pointer; font-weight: 600; color: var(--muted); } .remember input { width: 20px; height: 20px; accent-color: var(--accent); } /* Corte de caja */ .cash-rows { display: flex; flex-direction: column; } .cash-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); } .cash-row:last-child { border-bottom: none; } .cash-row span { color: var(--muted); font-weight: 600; } .cash-row b { font-weight: 800; } .cash-row.total { border-top: 2px solid var(--border); margin-top: 4px; padding-top: 14px; } .cash-row.total span { color: var(--ink); } .cash-row.total b { font-size: 20px; } /* Historial de cortes dentro del modal de caja */ .cm-hist { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; } .cm-hist-h { font-weight: 700; color: var(--muted); font-size: 13px; margin-bottom: 8px; } .cm-hist-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .cm-hist-row:last-child { border-bottom: none; } .cm-hist-row > div { flex: 1; min-width: 0; } .cm-hist-row b { font-size: 14px; } .cm-hist-row small { display: block; color: var(--muted); font-size: 12px; } /* Movimientos de efectivo del turno (inyeccion / inversion) */ .cm-mov { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; } .cm-mov-h { font-weight: 700; color: var(--muted); font-size: 13px; margin-bottom: 8px; } .cm-mov-empty { color: var(--muted); font-size: 13px; padding: 4px 0 8px; } .cm-mov-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--border); } .cm-mov-row:last-child { border-bottom: none; } .cm-mov-row b { font-variant-numeric: tabular-nums; } .cm-mov-row small { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-mov-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; } .cm-mov-tag i { width: 13px; height: 13px; } .cm-mov-tag.in { color: var(--success); background: var(--success-soft); } .cm-mov-tag.out { color: var(--danger); background: var(--danger-soft); } .cm-mov-btns { display: flex; gap: 8px; margin-top: 10px; } .cm-mov-btns .btn { flex: 1; } /* ---------- Cuentas divididas ---------- */ .split-count { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; flex-wrap: wrap; } .split-count .sc-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 20px; font-weight: 700; color: var(--ink); } .split-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; } .split-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 700; color: var(--ink); white-space: nowrap; } .split-tab small { color: var(--muted); font-weight: 700; } .split-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .split-tab.active small { color: rgba(255, 255, 255, 0.85); } .split-method { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .split-method span { color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; } .split-method .select { flex: 1; min-height: 46px; } .split-pending { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-weight: 800; margin-bottom: 6px; } .split-pending.ok { background: var(--success-soft); color: var(--success); } .split-pending [data-lucide] { width: 18px; height: 18px; } .split-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--border); } .split-item:last-child { border-bottom: none; } .split-item .si-info { flex: 1; min-width: 0; } .split-item .si-info b { font-weight: 700; } .split-item .si-info small { display: block; color: var(--muted); font-size: 13px; } .split-foot { flex-shrink: 0; padding-top: 14px; } /* ---------- Graficas (dona y barras) ---------- */ .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .chart-card { padding: 20px; } .chart-head { margin-bottom: 14px; } .chart-head h3 { font-size: 16px; font-weight: 800; } .chart-head small { color: var(--muted); font-size: 13px; text-transform: capitalize; } .chart-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .donut { width: 150px; height: 150px; flex-shrink: 0; } .donut-total { font-size: 22px; font-weight: 800; fill: var(--ink); } .donut-sub { font-size: 11px; fill: var(--muted); } .donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; } .dl-row { display: flex; align-items: center; gap: 8px; font-size: 14px; } .dl-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; } .dl-label { color: var(--muted); font-weight: 600; } .dl-val { margin-left: auto; font-weight: 800; } .dl-pct { min-width: 42px; text-align: right; font-weight: 800; color: var(--muted); } .bc-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; overflow-x: auto; padding-top: 6px; } .bc-col { flex: 1 0 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .bc-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .bc-bar { width: 70%; max-width: 32px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), #34d399); transition: height 0.3s ease; } .bc-x { font-size: 12px; color: var(--muted); font-weight: 600; } @media (max-width: 700px) { .charts-row { grid-template-columns: 1fr; } } /* Configuracion: mosaicos */ .cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cfg-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform 0.06s ease, border-color 0.15s ease; } .cfg-tile:active { transform: scale(0.98); } .cfg-tile:hover { border-color: var(--accent); } .cfg-tile .cfg-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 6px; } .cfg-tile .cfg-ico [data-lucide] { width: 26px; height: 26px; } .cfg-tile b { font-size: 17px; } .cfg-tile small { color: var(--muted); font-size: 13px; } @media (max-width: 560px) { .cfg-grid { grid-template-columns: 1fr; } } /* Tablero: filas de "pedidos en curso" (claras en celular) */ .dash-order { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .dash-order:last-child { border-bottom: none; } .dash-order .do-num { font-weight: 800; color: var(--muted); min-width: 52px; font-size: 15px; } .dash-order .do-main { flex: 1; min-width: 0; } .dash-order .do-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dash-order .do-line1 b { font-weight: 700; white-space: nowrap; } .dash-order .do-main small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; } .dash-order .do-total { font-weight: 800; white-space: nowrap; font-size: 16px; } /* Tablero: historial de pedidos (lista + busqueda) */ .hist-summary { display: flex; gap: 12px; color: var(--muted); font-weight: 600; font-size: 14px; margin: 0 0 12px; } .hist-summary span { display: inline-flex; align-items: center; gap: 7px; text-transform: capitalize; } .hist-summary [data-lucide] { width: 16px; height: 16px; } .hl-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); min-height: 54px; } .hl-search [data-lucide] { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; } .hl-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 17px; min-width: 0; } .hl-clear { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; } .hl-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface-2); border-radius: 18px 18px 0 0; color: var(--muted); font-weight: 600; font-size: 14px; } .hl-head b { color: var(--ink); } .hl-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); } .hl-item:last-child { border-bottom: none; } .hl-main { flex: 1; min-width: 0; } .hl-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hl-num { font-weight: 800; font-size: 15px; } .hl-where { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; } .hl-where [data-lucide] { width: 15px; height: 15px; } .hl-where.takeout { color: var(--warn); } .hl-where.dinein { color: var(--info); } .hl-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; text-transform: capitalize; } .hl-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hl-total { font-weight: 800; white-space: nowrap; font-size: 16px; } /* Suscripcion */ .sub-status { padding: 22px; } .sub-status .ss-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .ss-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 800; } .ss-badge [data-lucide] { width: 18px; height: 18px; } .sub-active .ss-badge { background: var(--success-soft); color: var(--success); } .sub-trial .ss-badge { background: var(--info-soft); color: var(--info); } .sub-expired .ss-badge { background: var(--danger-soft); color: var(--danger); } .ss-plan { color: var(--muted); font-weight: 700; } .ss-exp { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ss-exp .ss-l { color: var(--muted); font-size: 13px; font-weight: 600; } .ss-exp .ss-v { font-size: 19px; font-weight: 800; } .ss-days { padding: 8px 14px; border-radius: 12px; font-weight: 800; } .ss-days.d-ok { background: var(--success-soft); color: var(--success); } .ss-days.d-warn { background: var(--warn-soft); color: var(--warn); } .ss-days.d-bad { background: var(--danger-soft); color: var(--danger); } .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .plan-card { padding: 22px 20px; position: relative; display: flex; flex-direction: column; gap: 10px; } .plan-card.plan-best { border-color: var(--accent); } .plan-tag { position: absolute; top: -10px; right: 16px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; } .plan-name { font-size: 17px; font-weight: 700; color: var(--muted); } .plan-price { font-size: 32px; font-weight: 800; letter-spacing: -1px; } .plan-price small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .plan-save { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 700; font-size: 13px; min-height: 18px; } .plan-save [data-lucide] { width: 15px; height: 15px; } .plan-card .btn { margin-top: 6px; } @media (max-width: 480px) { .plan-grid { grid-template-columns: 1fr; } } /* ============================================================ LAYOUT APP ============================================================ */ .shell { min-height: 100dvh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .topbar .mark [data-lucide] { width: 22px; height: 22px; } .topbar .biz { font-weight: 800; font-size: 17px; letter-spacing: -0.3px; line-height: 1.1; } .topbar .biz small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); } .topbar .spacer { flex: 1; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .user-chip .who { text-align: right; line-height: 1.1; } .user-chip .who b { font-size: 14px; } .user-chip .who small { font-size: 12px; color: var(--muted); } .user-chip .av { width: 36px; height: 36px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); display: grid; place-items: center; font-weight: 700; font-size: 15px; } .body { flex: 1; display: flex; min-height: 0; } /* Navegacion: lateral en escritorio, inferior en celular */ .nav { width: 230px; flex-shrink: 0; padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .nav a { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 13px; color: var(--ink); text-decoration: none; font-weight: 600; transition: background 0.12s ease; } .nav a:hover { background: var(--surface-2); } .nav a.active { background: var(--accent-soft); color: var(--accent); } .nav a.active [data-lucide] { color: var(--accent); } .nav a .badge { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; } /* Boton principal "Nuevo pedido": destacado en color de acento */ .nav a.nav-cta { background: var(--accent); color: var(--accent-ink); font-size: 18px; font-weight: 700; padding: 16px 16px; margin-bottom: 2px; box-shadow: 0 6px 16px rgba(13, 159, 110, 0.28); } .nav a.nav-cta [data-lucide] { color: var(--accent-ink); width: 24px; height: 24px; } .nav a.nav-cta:hover { background: #0b8a5f; } .nav a.nav-cta.active { background: var(--accent); color: var(--accent-ink); } .nav a.nav-cta .badge { background: rgba(255, 255, 255, 0.25); } .nav .nav-sep { height: 1px; background: var(--border); margin: 10px 6px; } /* Cerrar sesion fijo al fondo de la barra lateral */ .nav .nav-logout { margin-top: auto; cursor: pointer; color: var(--danger); } .nav .nav-logout [data-lucide] { color: var(--danger); } .nav .nav-logout:hover { background: var(--danger-soft); } .main { flex: 1; min-width: 0; overflow-y: auto; } .page { padding: 22px; max-width: 1200px; margin: 0 auto; } .page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; } .page-head .spacer { flex: 1; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .grid { display: grid; gap: 14px; } .cols-auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* ===================== Panel de super admin (SaaS dashboard) ===================== */ .adm-wrap { min-height: 100vh; background: var(--surface-2); } .adm-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .adm-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; } .adm-brand small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; } .adm-userbtn { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); } .adm-userbtn:hover { background: var(--surface-2); } .adm-userbtn .av { width: 34px; height: 34px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; } .adm-userbtn .who { line-height: 1.15; } .adm-userbtn .who b { font-size: 14px; } .adm-userbtn .who small { display: block; color: var(--muted); font-size: 12px; } .adm-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 6px; z-index: 30; } .adm-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; } .adm-menu button:hover { background: var(--surface-2); } .adm-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; } .adm-main { max-width: 1040px; margin: 0 auto; padding: 24px 18px 70px; } .adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 26px; } .adm-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; min-width: 0; } .adm-stat .lbl { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; font-size: 13px; min-width: 0; } .adm-stat .lbl span:last-child, .adm-stat .lbl { overflow-wrap: anywhere; } .adm-stat .ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .adm-stat .ico [data-lucide] { width: 18px; height: 18px; } .adm-stat .val { font-size: clamp(20px, 4.5vw, 27px); font-weight: 800; margin-top: 8px; overflow-wrap: anywhere; line-height: 1.15; } .adm-sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .adm-sechead h2 { font-size: 20px; margin: 0; flex: 1; min-width: 130px; } .adm-search { position: relative; } .adm-search input { padding: 10px 12px 10px 36px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font: inherit; width: 240px; max-width: 100%; } .adm-search > [data-lucide] { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 60px 20px; } .empty [data-lucide] { width: 46px; height: 46px; color: var(--border); margin-bottom: 12px; } .empty p { font-size: 16px; } /* Estado vacio del listado de productos del POS: centrado en toda el area disponible (si no, al ser una celda del grid, quedaba pegado a la izquierda-arriba). */ .pos-menu .products .empty { grid-column: 1 / -1; min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ============================================================ PUNTO DE VENTA (tomar pedido) ============================================================ */ .pos { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; } .pos-menu { min-width: 0; } /* Buscador de productos en el POS */ .pos-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 12px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); min-height: 52px; } .pos-search:focus-within { border-color: var(--accent); } .pos-search > [data-lucide] { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; } .pos-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; min-width: 0; } .pos-search button { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; } /* Categorias: todas visibles en varias filas (sin scroll horizontal) */ .cat-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; } .cat-bar.dim { opacity: 0.45; } .cat-bar button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 12px; white-space: nowrap; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); } .cat-bar button [data-lucide] { width: 18px; height: 18px; } .cat-bar button.active { background: var(--chip-bg); color: var(--chip-ink); border-color: var(--ink); } .cat-bar button.active [data-lucide] { color: var(--chip-ink); } .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .product { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; transition: transform 0.06s ease, border-color 0.15s ease; min-height: 130px; } .product:active { transform: scale(0.97); } .product:hover { border-color: var(--accent); } .product .pico { width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .product .pico [data-lucide] { width: 26px; height: 26px; } .product .pname { font-weight: 700; font-size: 16px; line-height: 1.25; } .product .pprice { margin-top: auto; font-weight: 800; font-size: 18px; } .product.off { opacity: 0.5; } /* Carrito / ticket en construccion */ .cart { position: sticky; top: 18px; display: flex; flex-direction: column; max-height: calc(100dvh - 130px); } .cart-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .cart-head h3 { font-size: 19px; font-weight: 800; } .add-banner { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; } .add-banner [data-lucide] { width: 18px; height: 18px; } .cart-meta { display: flex; gap: 10px; margin-top: 12px; } /* Selector "Comer aqui / Para llevar" (obligatorio) */ .order-type { display: flex; gap: 10px; margin-top: 12px; } .order-type .ot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); } .order-type .ot-btn [data-lucide] { width: 20px; height: 20px; } .order-type .ot-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .order-type .ot-btn.active [data-lucide] { color: #fff; } .cart-items { flex: 1; overflow-y: auto; padding: 8px 8px; } .cart-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; } .ci-note { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--muted); } .ci-note.has { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .ci-note [data-lucide] { width: 19px; height: 19px; } .ci-name small [data-lucide] { width: 13px; height: 13px; } /* Chips de sugerencias para las notas */ .note-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .note-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink); } .note-chip:active { background: var(--accent-soft); } /* Editor de sugerencias de notas (Configuracion) */ .sug-list { display: flex; flex-wrap: wrap; gap: 8px; } .sug-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink); } .sug-chip button { background: none; border: none; cursor: pointer; color: var(--muted); font-weight: 800; font-size: 17px; line-height: 1; padding: 0; } .sug-chip button:hover { color: var(--danger); } /* Badge "5 tacos" en la tarjeta de un producto tipo orden/combo */ .product { position: relative; } .combo-tag { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-ink); font-size: 11px; font-weight: 700; } .combo-tag [data-lucide] { width: 13px; height: 13px; } /* Constructor de orden (combo) */ .combo-help { color: var(--muted); font-size: 14px; margin-bottom: 12px; } .combo-counter { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 800; margin-bottom: 14px; } .combo-counter.ok { background: var(--success-soft); color: var(--success); } .combo-counter [data-lucide] { width: 18px; height: 18px; } .combo-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 16px; } .combo-opt { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 600; font-size: 14px; color: var(--ink); text-align: left; } .combo-opt:active { background: var(--accent-soft); border-color: var(--accent); } .combo-opt[disabled] { opacity: 0.4; } .combo-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; } .combo-line { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; } .cl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .cl-name { font-size: 16px; } .cl-note { background: var(--surface); } .combo-empty { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--muted); padding: 24px; } /* Grupos del combo en el constructor del POS */ .combo-group { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; } .cg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cg-head b { font-size: 15px; } .cg-head .combo-counter { margin-bottom: 0; padding: 6px 12px; font-size: 13px; } .combo-group .combo-opts { margin-bottom: 0; } .combo-group .combo-lines { margin-top: 12px; margin-bottom: 0; } .combo-group .combo-line { background: var(--surface); } /* Productos fijos incluidos en el combo */ .combo-includes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .ci-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--success); font-size: 13px; } .ci-label [data-lucide] { width: 16px; height: 16px; } .ci-chip { padding: 5px 11px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: 13px; } /* Editor de productos del combo (admin Menu) */ .combo-comp-list { display: flex; flex-direction: column; gap: 8px; } .combo-comp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface-2); border-radius: 12px; padding: 8px 10px; } .combo-comp .cc-tag { font-weight: 700; color: var(--accent); font-size: 13px; } .combo-comp .cc-name { flex: 1; min-width: 110px; font-weight: 700; } .combo-comp .cc-mini { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; } .combo-comp .cc-size, .combo-comp .cc-qty { width: 56px; text-align: center; } .combo-comp .cc-prod, .combo-comp .cc-cat { flex: 1; min-width: 120px; } .combo-comp .cc-del { margin-left: auto; } /* Buscador con autocompletado para agregar productos al combo */ .combo-add { position: relative; } .combo-suggest { margin-top: 6px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; max-height: 240px; overflow-y: auto; } .combo-suggest.hidden { display: none; } .combo-sug { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 13px; background: transparent; border: none; border-bottom: 1px solid var(--border); text-align: left; font-weight: 600; color: var(--ink); font-size: 15px; } .combo-sug:last-child { border-bottom: none; } .combo-sug:hover, .combo-sug:active { background: var(--surface-2); } .combo-sug b { color: var(--muted); font-weight: 700; } .combo-sug-new { justify-content: flex-start; gap: 7px; color: var(--accent); } .combo-sug-new [data-lucide] { width: 17px; height: 17px; } .opt-group { background: var(--surface-2); border-radius: 12px; padding: 10px; margin-bottom: 8px; } .opt-group .og-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .opt-group .og-name { flex: 1; font-weight: 700; } .opt-group .oc-list { display: flex; flex-direction: column; gap: 6px; } /* Reglas GLOBALES (no bajo .opt-group) para que el clon flotante de arrastre que SortableJS agrega al conserve su apariencia. */ .oc-row { display: flex; align-items: center; gap: 6px; background: var(--surface); border-radius: 12px; } .oc-drag { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; align-self: stretch; color: var(--muted); cursor: grab; touch-action: none; border-radius: 10px 0 0 10px; } .oc-drag:active { cursor: grabbing; } .oc-drag [data-lucide] { width: 18px; height: 18px; } .oc-name { flex: 1; } .oc-price-wrap { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 0 10px; color: var(--muted); } .oc-price-wrap .input { width: 64px; border: none; padding: 8px 0; background: transparent; text-align: right; } /* Estados de arrastre (SortableJS) */ .oc-ghost { opacity: 0.35; background: var(--accent-soft) !important; } .oc-chosen { box-shadow: 0 0 0 2px var(--accent) inset; } .oc-fallback { box-shadow: 0 12px 30px rgba(0,0,0,0.28); border-radius: 12px; opacity: 0.98; } .opt-group .og-del { margin-left: auto; } /* Selector de opciones al tomar el pedido (POS) */ .opt-choices { display: flex; flex-wrap: wrap; gap: 8px; } .opt-choice { flex: 1 1 auto; min-width: 90px; min-height: 48px; padding: 6px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); } .opt-choice small { font-size: 13px; font-weight: 700; opacity: 0.8; } .opt-choice.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Extras: editor (admin) */ .extra-edit { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 8px 10px; } .extra-edit .ex-name { flex: 1; min-width: 100px; } .extra-edit .oc-price-wrap .input { width: 60px; } .extra-edit .ex-del { margin-left: auto; } /* Extras: al tomar el pedido (POS), con +/- */ .extra-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink); } .extra-toggle:active { background: var(--surface-2); } .extra-toggle [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; } .extra-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .extra-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 12px; padding: 8px 12px; } .extra-row .ex-info { flex: 1; min-width: 0; } .extra-row .ex-info b { font-weight: 700; } .extra-row .ex-info small { display: block; color: var(--muted); font-size: 13px; } .cart-item:hover { background: var(--surface-2); } .cart-item .ci-name { flex: 1; font-weight: 600; } .cart-item .ci-name small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; } .qty { display: flex; align-items: center; gap: 4px; } .qty button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 20px; font-weight: 700; color: var(--ink); display: grid; place-items: center; } .qty span { min-width: 30px; text-align: center; font-weight: 700; } .cart-foot { padding: 16px 18px; border-top: 1px solid var(--border); } .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .cart-total b { font-size: 16px; color: var(--muted); font-weight: 600; } .cart-total .amount { font-size: 30px; font-weight: 800; letter-spacing: -1px; } /* ============================================================ COCINA (KDS) y listas de pedidos ============================================================ */ /* Filtro por tipo (Caja / Pedidos): Todas / Comer aqui / Para llevar */ .type-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .type-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 14px; } .type-filter button [data-lucide] { width: 17px; height: 17px; } .type-filter button b { background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-size: 13px; } .type-filter button.active { background: var(--accent); border-color: var(--accent); color: #fff; } .type-filter button.active b { background: rgba(255,255,255,0.25); color: #fff; } .order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .ticket-card { display: flex; flex-direction: column; overflow: hidden; } .ticket-card .tc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .ticket-card .tc-num { font-weight: 800; font-size: 18px; } .ticket-card .tc-sub { font-size: 13px; color: var(--muted); } .ticket-card .tc-time { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; } .tc-body { padding: 8px 16px; } .tc-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); } .tc-line:last-child { border-bottom: none; } /* Boton para editar la nota de un platillo en Pedidos/Caja */ .tc-line .tc-note { flex: 0 0 auto; width: 34px; height: 34px; } .tc-line .tc-note [data-lucide] { width: 17px; height: 17px; } /* Nota recien editada: resaltada en cocina para que el cocinero la note */ .tc-line .n small.note-edited { display: inline-flex; align-items: center; gap: 4px; background: var(--warn-soft); color: var(--warn); padding: 2px 8px; border-radius: 8px; font-weight: 700; margin-top: 3px; } .tc-line .n small.note-edited [data-lucide] { width: 13px; height: 13px; } /* Ubicacion del pedido (Mesa / Para llevar) bien notoria */ .tc-loc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px 4px; } .loc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; } .loc-badge [data-lucide] { width: 20px; height: 20px; } .loc-badge.dinein { background: var(--info-soft); color: var(--info); } .loc-badge.takeout { background: var(--warn-soft); color: var(--warn); } .tc-line .q { font-weight: 800; min-width: 34px; } .tc-line .n { flex: 1; font-weight: 600; } .tc-line .n small { display: block; color: var(--warn); font-weight: 600; font-size: 13px; } .tc-line.done .n { text-decoration: line-through; color: var(--muted); } .tc-line .chk { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; color: transparent; } .tc-line.done .chk { background: var(--success); border-color: var(--success); color: #fff; } .tc-foot { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } /* El boton principal (Cobrar/Marcar listo) no se corta: salta a otra linea si falta espacio */ .tc-foot .btn-success { flex: 1 1 130px; min-width: 130px; } /* Boton compacto cuadrado (solo icono) para los pies de tarjeta */ .btn-sq { flex: 0 0 48px; width: 48px; padding: 0; } .btn-sq [data-lucide] { width: 20px; height: 20px; } /* ============================================================ LISTAS / TABLAS (admin) ============================================================ */ .list { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: none; } .row .r-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; } .row .r-main { flex: 1; min-width: 0; } .row .r-main b { font-weight: 700; } .row .r-main small { display: block; color: var(--muted); font-size: 14px; } /* Indicador de "precio actualizado hace X" en cada producto */ .price-upd { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--accent); } .price-upd [data-lucide] { width: 13px; height: 13px; } /* Checklist de categorias en Actualizar precios */ .bp-all { font-weight: 700; margin-bottom: 4px; } .bp-cats { display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; margin-top: 6px; padding: 4px; border: 1.5px solid var(--border); border-radius: 12px; } .bp-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; } .bp-cat:hover { background: var(--surface-2); } .bp-cat input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); } .bp-cat [data-lucide] { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .row .r-actions { display: flex; gap: 8px; flex-shrink: 0; } /* En celular, los botones de accion de cada producto no caben junto al nombre: se pasan a una segunda linea (alineados a la derecha) para no encimarse. */ @media (max-width: 600px) { .cat-products .row { flex-wrap: wrap; row-gap: 6px; } .cat-products .row .r-actions { flex-basis: 100%; justify-content: flex-end; } } /* Acordeon de categorias en el Menu */ .cat-header { background: var(--surface-2); border-radius: 18px 18px 0 0; } .cat-header:hover { background: var(--hover); } .cat-chevron { color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; } .cat-chevron.open { transform: rotate(180deg); } .cat-products.collapsed { display: none; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; } .stat { padding: 22px; min-width: 0; } .stat .s-label { color: var(--muted); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } /* El numero se ajusta al ancho de la tarjeta y nunca se sale (clamp + salto de emergencia). */ .stat .s-value { font-size: clamp(20px, 2.3vw, 32px); font-weight: 800; letter-spacing: -0.5px; margin-top: 8px; overflow-wrap: anywhere; } /* ---------- Reportes: selector de periodo ---------- */ .period-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .period-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); } .period-btn [data-lucide] { width: 18px; height: 18px; } .period-btn.active { background: var(--chip-bg); color: var(--chip-ink); border-color: var(--ink); } .period-btn.active [data-lucide] { color: var(--chip-ink); } .custom-range { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .custom-range .input { min-width: 150px; } .range-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; margin-bottom: 18px; text-transform: capitalize; } .range-label [data-lucide] { width: 17px; height: 17px; } /* ---------- Reportes: grafica de barras ---------- */ .chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; overflow-x: auto; padding-top: 6px; } .chart-col { flex: 1 0 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .chart-bar { width: 70%; max-width: 34px; min-height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), #34d399); transition: height 0.3s ease; } .chart-x { font-size: 12px; color: var(--muted); font-weight: 600; } /* ---------- Reportes: metodo de pago ---------- */ .method-bar { height: 26px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; } .method-seg { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; min-width: 0; transition: width 0.3s ease; } .seg-ef { background: var(--success); } .seg-tj { background: var(--info); } .seg-tr { background: #7c4dd0; } .method-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-weight: 600; } .method-legend span { display: inline-flex; align-items: center; gap: 7px; } .method-legend .dot { width: 13px; height: 13px; border-radius: 4px; display: inline-block; } .method-legend .dot-ef { background: var(--success); } .method-legend .dot-tj { background: var(--info); } .method-legend .dot-tr { background: #7c4dd0; } .method-legend b { color: var(--ink); } .method-legend small { color: var(--muted); font-weight: 600; } .prod-money { font-weight: 800; font-size: 17px; color: var(--success); white-space: nowrap; } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 24, 31, 0.5); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; padding: 0; } .modal { width: 100%; max-width: 480px; background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); max-height: 92dvh; overflow-y: auto; padding: 24px; animation: slideUp 0.2s ease; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } } .modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .modal-head h3 { font-size: 21px; font-weight: 800; flex: 1; } .modal-head .x { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--muted); } .modal-actions { display: flex; gap: 12px; margin-top: 22px; } .modal-actions .btn { flex: 1; } /* Lista del menu "Opciones" (celular) */ .opt-list { display: flex; flex-direction: column; gap: 8px; } .opt-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 17px; font-weight: 600; color: var(--ink); text-align: left; } .opt-item [data-lucide] { width: 22px; height: 22px; color: var(--muted); } .opt-item:active { background: var(--surface-2); } .opt-item.opt-danger { color: var(--danger); margin-top: 6px; } .opt-item.opt-danger [data-lucide] { color: var(--danger); } .opt-arrow { margin-left: auto; color: var(--border) !important; } /* Bloqueo del scroll de fondo cuando hay un panel abierto */ body.modal-open { overflow: hidden; } body.modal-open .main { overflow: hidden; } .modal-overlay, .modal { overscroll-behavior: contain; } /* Modal de altura fija (armador de ordenes): no se mueve al elegir */ .modal.modal-tall { height: 84dvh; max-height: 84dvh; display: flex; flex-direction: column; } .modal.modal-tall [data-modal-body] { flex: 1; min-height: 0; display: flex; flex-direction: column; } .modal.modal-tall .modal-actions { flex-shrink: 0; margin-top: 14px; } .combo-builder { flex: 1; min-height: 0; display: flex; flex-direction: column; } .combo-fixed { flex-shrink: 0; } .combo-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 2px; } @media (min-width: 901px) { .modal.modal-tall { height: auto; min-height: 520px; max-height: 84vh; } } /* Teclado numerico para cobrar */ .pay-amount { text-align: center; margin: 6px 0 18px; } .pay-amount .lbl { color: var(--muted); font-weight: 600; } .pay-amount .big { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; } .pay-change { background: var(--success-soft); color: var(--success); border-radius: 14px; padding: 14px; text-align: center; font-weight: 700; margin-top: 14px; } /* Botones de metodo de pago (efectivo / tarjeta / transferencia) */ .pay-methods { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .pay-methods .btn { flex: 1 1 30%; min-width: 110px; padding: 0 10px; gap: 7px; font-size: 15px; } .pay-methods .btn [data-lucide] { width: 18px; height: 18px; } /* Recuadro con datos bancarios para transferencia */ .pay-bank { background: var(--info-soft); border-radius: 14px; padding: 16px; margin-top: 4px; } .pay-bank-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--info); margin-bottom: 10px; } .pay-bank-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(37, 99, 201, 0.25); } .pay-bank-row:last-child { border-bottom: none; } .pay-bank-row span { color: var(--muted); font-weight: 600; } .pay-bank-row b { color: var(--ink); font-weight: 800; text-align: right; word-break: break-all; } .pay-bank-empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } /* ============================================================ TOAST ============================================================ */ #toast-root { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px; background: var(--chip-bg); color: var(--chip-ink); font-weight: 600; box-shadow: var(--shadow-lg); animation: toastIn 0.2s ease; } .toast.ok { background: var(--success); } .toast.err { background: var(--danger); } @keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================================ RESPONSIVE — celular del mesero ============================================================ */ .nav-mobile { display: none; } @media (max-width: 900px) { :root { --bottomnav: 64px; } body { font-size: 16px; } .nav { display: none; } .main { padding-bottom: calc(var(--bottomnav) + 20px); } /* Barra inferior: laterales + Nuevo al centro + Opciones */ .nav-mobile { display: flex; align-items: stretch; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border); height: calc(var(--bottomnav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); } .nm-side, .nm-flat { flex: 1; display: flex; justify-content: space-around; align-items: stretch; } .nm-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; position: relative; } .nm-item [data-lucide] { width: 23px; height: 23px; } .nm-item.active { color: var(--accent); } .nm-item .badge { position: absolute; top: 7px; right: 50%; margin-right: -20px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } /* Boton Nuevo: centrado y destacado en acento */ .nm-fab { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--accent); text-decoration: none; font-size: 11px; font-weight: 700; } .nm-fab [data-lucide] { width: 26px; height: 26px; color: #fff; background: var(--accent); border-radius: 50%; padding: 9px; box-sizing: content-box; box-shadow: 0 5px 14px rgba(13, 159, 110, 0.4); } .topbar .biz { font-size: 16px; } .user-chip { padding: 4px; border: none; background: transparent; } .user-chip .who { display: none; } .topbar-logout { display: none; } /* Tarjetas de estadistica mas compactas en celular (2 columnas) */ .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 15px; } .stat .s-label { font-size: 12px; } .stat .s-value { font-size: clamp(18px, 5.4vw, 23px); margin-top: 5px; } } /* ---- Telefono (<=699px): POS de una columna con carrito flotante ---- */ @media (max-width: 699px) { .pos { grid-template-columns: 1fr; } .cart { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom) + 16px); z-index: 36; max-height: 72dvh; border-radius: 20px; box-shadow: var(--shadow-lg); transform: translateY(calc(100% - 64px)); transition: transform 0.25s ease; } .cart.open { transform: translateY(0); } .cart-handle { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; } .cart-handle .ch-total { font-weight: 800; font-size: 18px; } .pos-menu { padding-bottom: 130px; } } /* ---- Telefono chico: modal como hoja inferior a todo lo ancho ---- */ @media (max-width: 600px) { .modal { max-width: 100%; } } /* ---- Tablet y mas: modales centrados, carrito acoplado ---- */ @media (min-width: 601px) { .modal-overlay { align-items: center; padding: 24px; } .modal { border-radius: 24px; } } @media (min-width: 700px) { .cart-handle { display: none; } /* El carrito acoplado deja espacio para la barra inferior (tablet) */ .cart { max-height: calc(100dvh - var(--bottomnav) - 60px); } } @media (min-width: 901px) { /* En computadora: barra superior y menu lateral fijos; solo el contenido hace scroll */ .shell { height: 100dvh; overflow: hidden; } .nav { overflow-y: auto; } .cart { max-height: calc(100dvh - 130px); } /* En computadora el login se muestra a dos paneles */ .login-hero { display: block; } /* En computadora: campo de PIN normal, sin teclado en pantalla */ .pin-desktop { display: flex; } .pin-touch { display: none; } } /* ---- Inventario ---- */ .inv-banner { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--info-soft); color:var(--ink); font-size:14px; margin-bottom:12px; } .inv-banner.ok { background:var(--success-soft); } .inv-banner i { flex-shrink:0; } .inv-progress { position:relative; height:22px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; margin-bottom:16px; } .inv-progress-fill { height:100%; background:var(--info); border-radius:999px 0 0 999px; transition:width .4s ease; } .inv-progress-fill.ok { background:var(--success); border-radius:999px; } .inv-progress span { position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--ink); } .inv-list { display:flex; flex-direction:column; } .inv-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); } .inv-row:last-child { border-bottom:none; } .inv-row.low { background:var(--warn-soft); } .inv-main { flex:1; min-width:0; } .inv-name { font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .inv-sub { font-size:12.5px; color:var(--muted); margin-top:2px; } .inv-tag-low { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--warn); background:var(--surface); border:1px solid var(--warn); border-radius:999px; padding:1px 7px; } .inv-tag-low i { width:12px; height:12px; } .inv-stock { text-align:right; min-width:74px; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; } .inv-stock b { font-size:19px; } .inv-stock b.neg { color:var(--danger); } .inv-stock b.pos { color:var(--success); } .inv-stock small { color:var(--muted); font-size:11px; } .inv-stock .inv-min { color:var(--warn); } .inv-actions { display:flex; gap:6px; flex-shrink:0; } .inv-hint, .inv-hint * { font-size:12.5px; color:var(--muted); } .inv-hint { margin:6px 0 10px; } @media (max-width: 560px) { .inv-row { flex-wrap:wrap; } .inv-actions { width:100%; justify-content:flex-end; } } /* Fila de receta (insumo + cantidad por unidad) en el formulario de producto */ .recipe-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .recipe-row .rc-insumo { flex:1; min-width:0; } .recipe-row .rc-qty { width:72px; text-align:center; } .recipe-row .rc-unit { font-size:12.5px; color:var(--muted); min-width:34px; } /* Pista de atajo de teclado dentro de un boton */ .kbd-hint { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:6px; font-size:11px; font-weight:700; line-height:1.5; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); font-family:inherit; } @media (max-width: 560px) { .kbd-hint { display:none; } } /* Periodos y cortes de inventario */ .inv-section-label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; } .inv-section-label i { width:16px; height:16px; } /* Buscador de insumos */ .inv-search { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 12px; margin-top:14px; } .inv-search > i { width:18px; height:18px; color:var(--muted); flex-shrink:0; } .inv-search input { flex:1; border:none; background:none; outline:none; padding:12px 0; font-size:15px; color:var(--ink); min-width:0; } .inv-search #inv-search-clear { background:none; border:none; cursor:pointer; color:var(--muted); display:flex; padding:4px; } .inv-search #inv-search-clear i { width:16px; height:16px; } /* Resumen de recuperacion colapsable */ .inv-summary { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; } .inv-summary-toggle { width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface-2); border:none; cursor:pointer; color:var(--ink); font-size:14px; font-weight:700; text-align:left; } .inv-summary-toggle > i:first-child { width:16px; height:16px; color:var(--muted); flex-shrink:0; } .inv-sum-title { flex:1; min-width:0; } .inv-sum-teaser { font-size:12px; font-weight:700; color:var(--info); background:var(--info-soft); border-radius:999px; padding:2px 9px; } .inv-sum-chev { width:18px; height:18px; color:var(--muted); transition:transform .2s ease; flex-shrink:0; } .inv-summary.open .inv-sum-chev { transform:rotate(180deg); } .inv-summary-body { padding:14px; } .inv-summary-body .inv-banner:first-child { margin-top:0; } /* Pestañas de inventario: una sola fila que se desliza (no se encima en celular) */ .inv-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .inv-tabs::-webkit-scrollbar { display:none; } .inv-tabs > button { white-space:nowrap; flex:0 0 auto; } .inv-two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; } .inv-mini-title { display:flex; align-items:center; gap:8px; font-weight:700; padding:14px 16px 8px; } .inv-mini-list { padding:0 16px 12px; } .inv-mini-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; } .inv-mini-row:last-child { border-bottom:none; } .inv-mini-row span { flex:1; min-width:0; } .inv-mini-row b { font-variant-numeric:tabular-nums; } .inv-num { display:inline-block; min-width:1.9em; margin-right:7px; color:var(--muted); font-variant-numeric:tabular-nums; font-weight:700; } .inv-mini-row small { color:var(--muted); min-width:64px; text-align:right; } .inv-mini-row.low b { color:var(--warn); } .inv-empty-mini { padding:14px 0; color:var(--muted); font-size:13px; } .inv-cut-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:20px 0 10px; } .inv-cut-list { display:flex; flex-direction:column; gap:10px; } .inv-cut { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; background:var(--surface-2); } .inv-cut-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .inv-cut-head b { font-variant-numeric:tabular-nums; } .inv-cut-head .btn-sq { margin-left:auto; } .inv-cut-tag { font-size:11px; font-weight:700; background:var(--info-soft); color:var(--info); border-radius:999px; padding:2px 8px; } .inv-cut-nums { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); } .inv-cut-nums b { color:var(--ink); } .inv-cut-nums b.pos { color:var(--success); } .inv-cut-nums b.neg { color:var(--danger); } @media (max-width: 640px) { .inv-two-col { grid-template-columns:1fr; } } /* Preparaciones (insumos hechos por lotes) */ .inv-modal-scroll { max-height:62vh; overflow-y:auto; margin:-4px -4px 0; padding:4px; } .prep-tag { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--info); background:var(--info-soft); border-radius:999px; padding:1px 7px; } .prep-tag i { width:12px; height:12px; } .equip-tag { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:1px 7px; } .equip-tag i { width:12px; height:12px; } .pb-detail { margin:6px 0 4px; } .pb-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:14px; } .pb-row span { flex:1; min-width:0; } .pb-row small { color:var(--muted); min-width:120px; text-align:right; font-size:12px; } .pb-row.short small { color:var(--danger); font-weight:700; } .pb-total { margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:14px; } /* Faltantes (lista de compras) */ .shop-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; } .shop-toolbar small { color:var(--muted); font-size:12.5px; flex:1; min-width:180px; } .shop-add { display:flex; gap:8px; } .shop-add .input { flex:1; } .shop-item { gap:12px; } .shop-check { background:none; border:none; cursor:pointer; color:var(--muted); padding:0; display:flex; align-items:center; flex-shrink:0; } .shop-check i { width:26px; height:26px; } .shop-check.on { color:var(--success); } .shop-item.done .inv-name { text-decoration:line-through; color:var(--muted); } .shop-item.done { opacity:.7; } .shop-auto { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--warn); background:var(--warn-soft); border-radius:999px; padding:1px 7px; } .shop-auto i { width:12px; height:12px; } /* El ticket termico se imprime en un iframe aislado (ver public/js/ticket.js), con su propio tamano de pagina @page, asi no usa hoja tamano carta. */ /* ===== Pronostico de compra (vistas: forecast.js) ========================= */ .fc-sub { color: var(--muted); font-size: 14px; margin: -4px 0 0; } .fc-h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 22px 0 10px; } .fc-h3 [data-lucide] { width: 20px; height: 20px; color: var(--muted); } .fc-range { margin-top: 14px; } .fc-range-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: 6px; } .fc-range-label [data-lucide] { width: 16px; height: 16px; } .fc-custom { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; } .fc-custom .field { margin: 0; flex: 1 1 150px; } /* Tira de dias con su factor */ .fc-days { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .fc-day { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); } .fc-day.up { border-color: var(--success); background: var(--success-soft); } .fc-day.down { border-color: var(--warn); background: var(--warn-soft); } .fc-day-top { display: flex; align-items: baseline; gap: 8px; } .fc-dow { font-weight: 700; } .fc-date { color: var(--muted); font-size: 20px; font-weight: 700; } .fc-factor { font-size: 13px; color: var(--muted); margin-top: 2px; } .fc-day.up .fc-factor { color: var(--success); font-weight: 700; } .fc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .fc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--surface-2); color: var(--muted); } .fc-chip [data-lucide] { width: 12px; height: 12px; } .fc-chip.quincena { background: var(--info-soft); color: var(--info); } .fc-chip.especial { background: var(--accent-soft); color: var(--accent); } /* Tabla de compra */ .fc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } .fc-table { width: 100%; border-collapse: collapse; font-size: 15px; } .fc-table th, .fc-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } .fc-table th { background: var(--surface-2); font-size: 13px; color: var(--muted); font-weight: 700; } .fc-table tr:last-child td { border-bottom: 0; } .fc-table .num { text-align: right; white-space: nowrap; } .fc-table .low { color: var(--danger); } .fc-table .buy b { font-size: 17px; } .fc-table tr.ok .buy { color: var(--success); } .fc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: 14px; } .fc-ok [data-lucide] { width: 15px; height: 15px; } .fc-note { color: var(--muted); font-size: 13px; margin: 8px 0 12px; } .fc-empty { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 14px; font-size: 14px; line-height: 1.5; } .fc-empty [data-lucide] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; } .fc-details { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .fc-details summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; } .fc-details summary [data-lucide] { width: 18px; height: 18px; color: var(--muted); } .fc-prods { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .fc-prod { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; } /* Calendario del mes */ .fc-cal { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; } .fc-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .fc-cal-head b { font-size: 17px; } .fc-grid-dow, .fc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .fc-grid-dow span { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding-bottom: 4px; } .fc-cell { min-height: 54px; border-radius: 8px; background: var(--surface-2); padding: 4px 5px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .fc-cell.empty { background: transparent; } .fc-cell.q { background: var(--info-soft); } .fc-cell.sp { outline: 2px solid var(--accent); outline-offset: -2px; } .fc-n { font-weight: 700; } .fc-ic { width: 13px; height: 13px; color: var(--info); } .fc-sp-name { font-size: 10px; line-height: 1.15; color: var(--accent); font-weight: 700; } .fc-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); } .fc-legend span { display: inline-flex; align-items: center; gap: 6px; } .fc-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .fc-dot.q { background: var(--info-soft); border: 1px solid var(--info); } .fc-dot.sp { background: transparent; border: 2px solid var(--accent); } /* Catalogo de fechas especiales */ .fc-list-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fc-list-head .fc-h3 { flex: 1 1 auto; } .fc-sd-list { display: flex; flex-direction: column; gap: 8px; } .fc-sd { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); } .fc-sd.off { opacity: 0.5; } .fc-sd-main { flex: 1 1 auto; min-width: 0; } .fc-sd-main b { display: block; } .fc-sd-meta { font-size: 13px; color: var(--muted); } .fc-sd-actions { display: flex; gap: 6px; flex: 0 0 auto; } .fc-del [data-lucide] { color: var(--danger); } .fc-mmdd { display: flex; gap: 8px; } .fc-mmdd .input { flex: 1 1 0; } @media (max-width: 560px) { .fc-day { flex: 1 1 100%; } .fc-cell { min-height: 46px; } .fc-sp-name { display: none; } }