/* ════════════════════════════════════════════════════════════════ Menú Pro — Sistema de diseño "Opus" (premium) Reescrito desde cero conservando TODOS los nombres de clase del proyecto original (cero ruptura) y elevando el detalle visual: tokens completos, dark mode, sombras en capas, micro-interacciones, skeleton loaders y componentes repulidos. Mobile-first NO negociable: touch ≥44px, inputs 16px, sin overflow 360px. ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ────────────────────────────────────────────────────────────── TOKENS — Tema claro (default) ────────────────────────────────────────────────────────────── */ :root { /* Superficies (de fondo a elevado) */ --bg: #f4f1ec; /* lienzo cálido */ --surface: #ffffff; /* tarjetas / sidebar */ --surface-2: #faf7f2; /* zonas hundidas / inputs */ --white: #ffffff; /* compat: usado por JS inline */ --elevated: #ffffff; /* popovers / modales */ /* Bordes */ --border: #e8e1d7; --border-2: #d8cfc2; /* Texto */ --text: #1c1813; --text-2: #5c5349; --muted: #9a9088; /* Acento terracota (rampa) */ --accent: #c8692a; --accent-strong:#b25a20; --accent-dark: #98491a; /* compat */ --accent-light: #fdf0e8; /* compat (fondos suaves) */ --accent-soft: #fdf0e8; --accent-dim: #e9b894; /* bordes/hover suaves */ --accent-glow: #fdf3ec; /* fondo hover muy tenue */ --accent-grad: linear-gradient(135deg, #d9772f 0%, #c8692a 55%, #b25a20 100%); /* Secundario azul */ --info: #1a6090; --info-bg: #ecf3fb; --info-strong: #155078; /* Semánticos */ --success: #2a7a4a; --success-bg: #ebf6f0; --danger: #c0392b; --danger-bg: #fdeeed; --warn: #ab7113; --warn-bg: #fdf6e7; /* Sombras en capas (más suaves y realistas) */ --shadow-xs: 0 1px 2px rgba(28,24,19,.05); --shadow-sm: 0 1px 3px rgba(28,24,19,.06), 0 1px 2px rgba(28,24,19,.04); --shadow: 0 6px 18px -4px rgba(28,24,19,.12), 0 2px 6px -2px rgba(28,24,19,.07); --shadow-lg: 0 18px 40px -12px rgba(28,24,19,.22), 0 6px 14px -6px rgba(28,24,19,.10); --shadow-accent:0 6px 16px -4px rgba(200,105,42,.45); /* Geometría */ --r-sm: 7px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --ring: 0 0 0 3px rgba(200,105,42,.18); /* Tipografía */ --font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Movimiento */ --ease: cubic-bezier(.4,0,.2,1); --t-fast: .14s var(--ease); --t: .22s var(--ease); /* Skeleton */ --skel-base: #ece5db; --skel-shine:#f6f1ea; color-scheme: light; } /* ────────────────────────────────────────────────────────────── TOKENS — Tema oscuro Se activa con [data-theme="dark"] en , o por preferencia del sistema cuando el usuario no fijó un tema manual. ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #15120e; --surface: #201b15; --surface-2: #1a1510; --white: #201b15; --elevated: #262019; --border: #352c22; --border-2: #463a2d; --text: #f3ece2; --text-2: #c3b6a6; --muted: #8d8074; --accent: #e98a44; --accent-strong:#d9772f; --accent-dark: #f0a368; --accent-light: #2c2016; --accent-soft: #2c2016; --accent-dim: #5a3d22; --accent-glow: #271c12; --accent-grad: linear-gradient(135deg, #f0975a 0%, #e98a44 55%, #d9772f 100%); --info: #5aa6df; --info-bg: #16252f; --info-strong: #82bdec; --success: #57bd84; --success-bg: #16271d; --danger: #e8675a; --danger-bg: #2c1815; --warn: #d9a441; --warn-bg: #2a2210; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow: 0 8px 22px -6px rgba(0,0,0,.6), 0 3px 8px -3px rgba(0,0,0,.45); --shadow-lg: 0 22px 48px -14px rgba(0,0,0,.7), 0 8px 18px -8px rgba(0,0,0,.5); --shadow-accent:0 6px 18px -4px rgba(233,138,68,.4); --ring: 0 0 0 3px rgba(233,138,68,.25); --skel-base: #2a231b; --skel-shine:#3a3024; color-scheme: dark; } /* Dark por preferencia del sistema (si no hay tema manual explícito) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#15120e; --surface:#201b15; --surface-2:#1a1510; --white:#201b15; --elevated:#262019; --border:#352c22; --border-2:#463a2d; --text:#f3ece2; --text-2:#c3b6a6; --muted:#8d8074; --accent:#e98a44; --accent-strong:#d9772f; --accent-dark:#f0a368; --accent-light:#2c2016; --accent-soft:#2c2016; --accent-dim:#5a3d22; --accent-glow:#271c12; --accent-grad:linear-gradient(135deg,#f0975a,#e98a44 55%,#d9772f); --info:#5aa6df; --info-bg:#16252f; --info-strong:#82bdec; --success:#57bd84; --success-bg:#16271d; --danger:#e8675a; --danger-bg:#2c1815; --warn:#d9a441; --warn-bg:#2a2210; --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35); --shadow:0 8px 22px -6px rgba(0,0,0,.6),0 3px 8px -3px rgba(0,0,0,.45); --shadow-lg:0 22px 48px -14px rgba(0,0,0,.7),0 8px 18px -8px rgba(0,0,0,.5); --shadow-accent:0 6px 18px -4px rgba(233,138,68,.4); --ring:0 0 0 3px rgba(233,138,68,.25); --skel-base:#2a231b; --skel-shine:#3a3024; color-scheme: dark; } } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); /* --font-scale (1 / 1.15 / 1.3) controla el tamaño de letra ajustable (Configuración → 🔤 Tamaño de letra). Se usa px absoluto acá (no rem): `rem` en el propio elemento raíz se resuelve contra el default del navegador (16px), no contra sí mismo, lo que rompería la base real de 14px del proyecto. Todo el resto del CSS/JS sí usa rem normalmente, relativo a este valor. */ font-size: calc(14px * var(--font-scale, 1)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--t), color var(--t); } /* ── Layout ── */ .app { display: flex; min-height: 100vh; } /* ────────────────────────────────────────────────────────────── SIDEBAR ────────────────────────────────────────────────────────────── */ .sidebar { width: 248px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: transform var(--t); z-index: 50; box-shadow: var(--shadow-sm); } .sidebar-brand { padding: 1.6rem 1.25rem 1.15rem; border-bottom: 1px solid var(--border); } .brand-icon { width: 42px; height: 42px; background: var(--accent-grad); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size:1.428571rem; margin-bottom: 0.8rem; box-shadow: var(--shadow-accent); } .brand-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.2; } .brand-sub { font-size:0.785714rem; color: var(--muted); margin-top: 3px; font-weight: 400; letter-spacing: .02em; } .sidebar-nav { padding: 0.85rem 0.7rem; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav-label { font-size:0.642857rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.75rem 0.3rem; font-weight: 800; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 0.6rem 0.8rem; border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); font-size:1rem; font-weight: 500; transition: background var(--t-fast), color var(--t-fast); user-select: none; border: none; background: none; width: 100%; text-align: left; min-height: 44px; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; } .nav-item.active::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; border-radius: 3px; background: var(--accent); } .nav-icon { font-size:1.142857rem; width: 22px; text-align: center; flex-shrink: 0; } .nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size:0.714286rem; font-weight: 800; padding: 1px 7px; border-radius: 10px; display: none; box-shadow: var(--shadow-accent); } .nav-badge.show { display: inline-block; animation: pop .25s var(--ease); } @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .sidebar-footer { padding: 1rem 1.1rem; border-top: 1px solid var(--border); } .owner-chip { display: flex; align-items: center; gap: 9px; margin-bottom: 0.8rem; } .owner-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size:0.928571rem; font-weight: 800; color: var(--accent); flex-shrink: 0; } .owner-name { font-size:0.892857rem; font-weight: 700; color: var(--text); } .owner-role { font-size:0.714286rem; color: var(--muted); } .btn-change-pwd, .btn-logout { width: 100%; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px; font-family: var(--font); font-size:0.892857rem; color: var(--muted); cursor: pointer; transition: all var(--t-fast); min-height: 44px; } .btn-change-pwd { margin-bottom: 7px; } .btn-change-pwd:hover { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow); } .btn-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } /* Overlay móvil */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); z-index: 40; animation: fadeIn .2s var(--ease); } .sidebar-overlay.open { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Modal de comprobante de pago */ .comprobante-modal { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,.85); } .comprobante-modal.show { display: flex; animation: fadeIn .2s var(--ease); } .comprobante-modal-img { max-width: 100%; max-height: 85vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .comprobante-modal-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.15); color: #fff; font-size: 1.2rem; backdrop-filter: blur(4px); } /* ────────────────────────────────────────────────────────────── MAIN / TOPBAR ────────────────────────────────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); padding: 0.8rem 1.6rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 30; } .hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .hamburger span { display: block; width: 18px; height: 2px; background: var(--text-2); border-radius: 2px; transition: all var(--t); } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* min-width:0 es obligatorio: sin él, un flex item con flex:1 no encoge por debajo de su min-content, así que con la letra grande el título empujaba los botones del topbar fuera de la pantalla en TODOS los paneles. Ahora se corta con puntos suspensivos en vez de desbordar. */ .page-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-date { font-size:0.785714rem; color: var(--muted); white-space: nowrap; } /* Botón de tema (toggle de dark mode) */ .theme-toggle { background: none; border: 1px solid var(--border); cursor: pointer; font-size: 1.1rem; line-height: 1; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); transition: all var(--t-fast); } .theme-toggle:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent-dim); } .theme-toggle:active { transform: scale(.92); } .content { flex: 1; overflow-y: auto; padding: 1.75rem; } /* ── Panels ── */ .panel { display: none; } .panel.active { display: block; animation: fadeUp .3s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Section header ── */ .sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; gap: 1rem; flex-wrap: wrap; } .sec-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; } .sec-sub { font-size:0.857143rem; color: var(--muted); margin-top: 3px; } /* ────────────────────────────────────────────────────────────── CARDS ────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; overflow: hidden; transition: box-shadow var(--t), border-color var(--t), transform var(--t); } .card:hover { box-shadow: var(--shadow); } .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* Mobile-first: que el grupo de acciones baje de línea en 360px en vez de cortarse fuera de la card (overflow:hidden). Antes el botón "Eliminar" de los menús del día quedaba inaccesible. */ flex-wrap: wrap; } .card-title { font-weight: 700; font-size:1rem; color: var(--text); } .card-body { padding: 1.25rem; } /* ── Tabs ── */ .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; gap: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 0.6rem 1.1rem; font-size:1rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; margin-bottom: -2px; transition: color var(--t-fast), border-color var(--t-fast); font-family: var(--font); min-height: 44px; display: inline-flex; align-items: center; } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; } .tab:hover:not(.active) { color: var(--text); } /* ────────────────────────────────────────────────────────────── BOTONES ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-sm); font-family: var(--font); font-size:1rem; font-weight: 700; cursor: pointer; border: none; transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast); white-space: nowrap; min-height: 44px; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(.96); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn-primary { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-accent); } .btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-accent), var(--shadow); } .btn-ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-2); } .btn-danger { background: none; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-size:1rem; padding: 5px 14px; min-height: 44px; } .btn-danger:hover { background: var(--danger-bg); } .btn-success { background: none; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); font-size:1rem; padding: 5px 14px; min-height: 44px; } .btn-success:hover { background: var(--success-bg); } .font-scale-btn { flex: 1; min-height: 44px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-weight: 700; font-size: 1rem; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); } .font-scale-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .btn-warn { background: none; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); font-size:1rem; padding: 5px 14px; min-height: 44px; } .btn-warn:hover { background: var(--warn-bg); } .btn-sm { padding: 5px 12px; font-size:1rem; min-height: 44px; } /* Botón que ocupa todo el ancho disponible — ISS-089 ("Cobrar mesa N") */ .btn-block { width: 100%; } /* ── Form fields ── */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0.875rem; } .field label { font-size:0.785714rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .field input, .field select, .field textarea { background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-family: var(--font); font-size:1.142857rem; color: var(--text); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); } .field input::placeholder { color: var(--muted); opacity: .7; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .span-2 { grid-column: span 2; } .form-error { background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: var(--r-sm); padding: 8px 12px; color: var(--danger); font-size:0.892857rem; display: none; margin-top: 0.5rem; } .form-error.show { display: block; animation: shake .3s var(--ease); } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } /* ── Table ── */ .table-wrap { overflow-x: auto; border-radius: var(--r-sm); } table { width: 100%; border-collapse: collapse; min-width: 500px; } thead tr { border-bottom: 2px solid var(--border); } th { padding: 0.65rem 1rem; font-size:0.714286rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 800; white-space: nowrap; } td { padding: 0.8rem 1rem; font-size:0.928571rem; color: var(--text-2); border-bottom: 1px solid var(--border); vertical-align: middle; } td strong { color: var(--text); } tbody tr { transition: background var(--t-fast); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-2); } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size:0.714286rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; } .badge-pendiente { background: var(--warn-bg); color: var(--warn); } .badge-preparando { background: var(--info-bg); color: var(--info); } .badge-entregando { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #7c3aed; } .badge-completado { background: var(--success-bg); color: var(--success); } .badge-cancelado { background: var(--danger-bg); color: var(--danger); } .badge-confirmada { background: var(--success-bg); color: var(--success); } .badge-activo { background: var(--success-bg); color: var(--success); } .badge-inactivo { background: var(--danger-bg); color: var(--danger); } /* ── Order card ── */ .order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.25rem; margin-bottom: 0.875rem; box-shadow: var(--shadow-sm); animation: fadeUp .25s var(--ease); transition: box-shadow var(--t), transform var(--t); } .order-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .order-meta { font-size:1rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .order-items { font-size:1rem; color: var(--text-2); margin-bottom: 0.75rem; } .order-item-line { padding: 3px 0; border-bottom: 1px dashed var(--border); } .order-item-line:last-child { border-bottom: none; } /* Encabezado de instancia de menú dentro de un pedido — ISS-041. Aparece solo cuando hay 2+ menús: separa qué entrada va con qué segundo. Va en línea propia y no dentro del header porque en 360px compite con el badge de estatus. `display:block` para que también funcione en la Cola, donde las líneas son . */ .menu-grupo-head { display: block; font-size:0.785714rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding: 0.5rem 0 0.15rem; } /* El primero también lleva aire arriba: en Cocina viene justo debajo del badge de modalidad y sin separación los dos se leen como un solo bloque. */ .order-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ── Stat cards ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.15rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--t), transform var(--t); } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent-grad); opacity: 0; transition: opacity var(--t); } .stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .stat-card:hover::after { opacity: 1; } .stat-label { font-size:0.714286rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.45rem; } .stat-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: var(--text); line-height: 1; } .stat-value.accent { color: var(--accent); } .stat-value.success { color: var(--success); } /* ── Bar chart (CSS) ── */ .bar-row { margin-bottom: 0.875rem; } .bar-labels { display: flex; justify-content: space-between; font-size:0.857143rem; margin-bottom: 4px; } .bar-name { color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .bar-count { color: var(--muted); font-weight: 800; } .bar-track { height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 5px; background: var(--accent-grad); transition: width 0.7s var(--ease); } .bar-fill.green { background: linear-gradient(135deg, #34936a, var(--success)); } /* ── Empty / Loading ── */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); } .empty-icon { font-size: 2.75rem; margin-bottom: 0.75rem; opacity: .85; } .empty-text { font-size:1rem; } .loading-text { text-align: center; padding: 2rem; color: var(--muted); font-size:1rem; } /* ────────────────────────────────────────────────────────────── SKELETON LOADERS (nuevo — Fase 1) Uso:
/ .skel-card / .skel-stat ────────────────────────────────────────────────────────────── */ .skel { position: relative; overflow: hidden; background: var(--skel-base); border-radius: var(--r-sm); } .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-shine), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .skel-line { height: 12px; margin: 8px 0; } .skel-line.sh { width: 60%; } .skel-line.md { width: 80%; } .skel-title { height: 20px; width: 45%; margin-bottom: 14px; border-radius: var(--r-sm); } .skel-card { height: 96px; border-radius: var(--r); margin-bottom: .875rem; } .skel-stat { height: 84px; border-radius: var(--r); } .skel-chart { height: 240px; border-radius: var(--r); } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── Toast ── */ #toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(90px); background: var(--text); color: var(--bg); padding: 11px 20px; border-radius: var(--r); font-size:0.928571rem; font-weight: 700; z-index: 200; transition: transform .35s var(--ease); pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; } #toast.show { transform: translateX(-50%) translateY(0); } #toast.ok { background: var(--success); color: #fff; } #toast.err { background: var(--danger); color: #fff; } /* ── Toggle switch ── */ .toggle { position: relative; display: inline-block; width: 38px; height: 22px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border-2); border-radius: 22px; cursor: pointer; transition: background var(--t); } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; left: 3px; top: 3px; transition: transform var(--t); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .toggle input:checked + .toggle-slider { background: var(--accent); } .toggle input:checked + .toggle-slider::before { transform: translateX(16px); } /* ── Inline form row ── */ .inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .inline-form .field { margin-bottom: 0; flex: 1; min-width: 140px; } /* scrollbar */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ────────────────────────────────────────────────────────────── BOTTOM NAV móvil (nuevo — listo para Fase 2) ────────────────────────────────────────────────────────────── */ .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; } .bottom-nav-item { flex: 1; min-height: 50px; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size:0.714286rem; font-weight: 700; font-family: var(--font); border-radius: 10px; transition: color var(--t-fast), background var(--t-fast); } .bottom-nav-item .bn-ico { font-size:1.357143rem; line-height: 1; } .bottom-nav-item.active { color: var(--accent); } .bottom-nav-item.active .bn-ico { transform: translateY(-1px); } .bottom-nav-item:active { background: color-mix(in srgb, var(--accent) 10%, transparent); } .bottom-nav-item.hidden { display: none !important; } /* Badge sobre el ícono del bottom-nav */ .bottom-nav-item { position: relative; } .bottom-nav-item .bn-badge { position: absolute; top: 4px; left: 50%; transform: translateX(4px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; font-size:0.714286rem; font-weight: 800; background: var(--accent); color: #fff; margin-left: 0; box-shadow: 0 0 0 2px var(--surface); } .bottom-nav-item .bn-badge[hidden] { display: none; } /* ────────────────────────────────────────────────────────────── RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .hamburger { display: flex; } .topbar-date { display: none; } /* Padding y gap en px, no rem: en rem crecen con el tamaño de letra y se comían el ancho disponible del topbar justo cuando más falta hace. */ .topbar { padding: 0.8rem 0.75rem; gap: 0.5rem; } .content { padding: 1.2rem 1.1rem calc(76px + env(safe-area-inset-bottom)); } .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; } .span-2 { grid-column: span 1; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .bottom-nav { display: flex; } } .hidden { display: none !important; } /* ────────────────────────────────────────────────────────────── COLA DEL DÍA + KANBAN ────────────────────────────────────────────────────────────── */ #cola-dia-lista { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; } /* Aviso de pedidos de días anteriores sin cerrar (cierre de caja). En 360px se apila para que el botón conserve su área de toque completa. */ .banner-sin-cerrar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; padding: 0.85rem 1rem; background: var(--warn-bg); border: 1px solid rgba(171, 113, 19, 0.28); border-left: 4px solid var(--warn); border-radius: var(--r); } .banner-sin-cerrar-txt { font-size: 1rem; color: var(--warn); line-height: 1.35; } .banner-sin-cerrar .btn { min-height: 44px; flex-shrink: 0; } @media (max-width: 380px) { .banner-sin-cerrar { flex-direction: column; align-items: stretch; } .banner-sin-cerrar .btn { width: 100%; } } /* Fila de pedido dentro del modal de cierre de caja */ .cierre-item { border: 1px solid var(--border); border-radius: var(--r); border-left: 4px solid var(--warn); padding: 0.85rem 1rem; background: var(--surface); } .cierre-item-head { font-size: 1rem; font-weight: 700; color: var(--text); } .cierre-item-meta { font-size: 0.928571rem; color: var(--muted); margin-top: 2px; } .cierre-item-items { font-size: 0.928571rem; color: var(--text-2); margin-top: 6px; line-height: 1.5; } .cierre-item-acciones { display: flex; gap: 8px; margin-top: 0.75rem; flex-wrap: wrap; } .cierre-item-acciones .btn { flex: 1 1 auto; min-height: 44px; min-width: 128px; } .cola-card { border-radius: var(--r); padding: 0.9rem 1.05rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid transparent; box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t); } .cola-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .cola-orden { border-left-color: var(--accent); } .cola-reserva { border-left-color: var(--info); } .cola-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; } .cola-card-title { font-size:1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; } .cola-card-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .cola-meta { font-size:0.857143rem; color: var(--muted); } .cola-tiempo { font-size:0.857143rem; color: var(--muted); white-space: nowrap; } .cola-codigo { font-size:0.785714rem; color: var(--muted); font-family: ui-monospace, monospace; } .cola-items { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; } .cola-item-line { font-size:0.892857rem; color: var(--text-2); } .cola-item-line em { font-style: normal; color: var(--muted); opacity: 0.75; } .kanban-tabs { margin-bottom: 1rem; } .kanban-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--border); color: var(--muted); font-size:0.785714rem; font-weight: 800; margin-left: 4px; transition: background var(--t-fast), color var(--t-fast); } .kanban-badge.kb-badge-active { background: var(--accent); color: #fff; } .zona-pedidos { display: flex; flex-direction: column; gap: 0.75rem; } /* ── "Por cobrar" por mesa (ISS-089) ───────────────────────────── La zona dejó de listar pedidos sueltos: lista mesas con su cuenta. Cada fila trae el total y su botón de cobrar sin desplegar nada; el despliegue muestra los tickets, con el precio de cada pedido (que antes no existía en ninguna pantalla del panel). Ver modules/pedidos.js. */ .cobrar-resumen { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: var(--r); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .cobrar-resumen-lbl { font-size: 0.785714rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; } .cobrar-resumen-val { font-family: var(--font-display); font-size: 1.357143rem; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .mesa-cuenta { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow var(--t), border-color var(--t); } .mesa-cuenta.abierta { border-color: var(--border-2); box-shadow: var(--shadow); } .mesa-cuenta-head { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.65rem 0.75rem; } /* Toda la fila superior es el área de despliegue; el botón de cobrar va debajo para que el touch target de 44px de uno no se coma el del otro. */ .mesa-cuenta-open { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: none; padding: 0; min-height: 48px; font: inherit; text-align: left; color: var(--text); cursor: pointer; } .mesa-cuenta-open:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } .mesa-cuenta-num { width: 44px; height: 44px; flex: none; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-strong); font-weight: 900; font-size: 1.142857rem; line-height: 1; } .mesa-cuenta-num .cap { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-top: 1px; } .mesa-cuenta.sin-mesa .mesa-cuenta-num { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); } .mesa-cuenta-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } .mesa-cuenta-tit { font-size: 0.964286rem; font-weight: 700; } .mesa-cuenta-sub { font-size: 0.785714rem; color: var(--muted); } .mesa-cuenta-der { display: flex; align-items: center; gap: 0.4rem; flex: none; } .mesa-cuenta-monto { font-size: 1.05rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .mesa-cuenta-chev { font-size: 0.642857rem; color: var(--muted); transition: transform var(--t); } .mesa-cuenta.abierta .mesa-cuenta-chev { transform: rotate(180deg); } .mesa-cuenta-body { border-top: 1px solid var(--border); background: var(--surface-2); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; animation: mesa-abrir 0.22s var(--ease); } @keyframes mesa-abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mesa-cuenta-body { animation: none; } } .mesa-cuenta-aviso { font-size: 0.785714rem; color: var(--muted); text-align: center; padding: 0.2rem; } .ticket-cuenta { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; } .ticket-cuenta.reserva { border-left-color: var(--info); } .ticket-cuenta-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .ticket-cuenta-tit { font-size: 0.928571rem; font-weight: 700; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-width: 0; } .ticket-cuenta-monto { font-size: 0.928571rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .ticket-cuenta-pago { display: flex; gap: 0.35rem; flex-wrap: wrap; } .ticket-cuenta-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; } /* Miniatura de foto clicable en las tablas de platos (menú/carta). Con foto abre el widget PhotoEditor; sin foto dispara la subida. */ .foto-cell { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast); } .foto-cell:active { transform: scale(0.93); } .foto-cell-img { object-fit: cover; } .foto-cell-empty { background: var(--bg); border: 1px dashed var(--border); font-size:1.142857rem; } .foto-cell-empty:hover { border-color: var(--accent-dim); } /* ── Configuración de menú del día — armado v2 (flujo-menuv2.md) ── La config vive como vista inline del widget MenuWizard (#mw-config). Las secciones son una LISTA VERTICAL tipo acordeón (no carrusel): todas visibles apiladas y el scroll de página sobrevive al re-render. ── */ /* Fila compacta de toggles del cliente (reemplaza al hub de 2 opciones) */ .mc-cli-compact { display: flex; gap: 8px; margin-bottom: 0.85rem; } .mc-cli-btn { flex: 1; min-width: 0; min-height: 48px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size:0.964286rem; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; transition: transform .1s; -webkit-tap-highlight-color: transparent; } .mc-cli-btn:active { transform: scale(.98); } .mc-cli-btn small { font-weight: 400; font-size:0.75rem; color: var(--muted); } .mc-cli-btn.on { border-color: var(--primary); color: var(--primary); } .mc-cli-btn.vis { border-color: var(--success); color: var(--success); } .mc-cli-btn.hid { border-color: var(--danger); color: var(--danger); } /* Hint "secciones heredadas" tras crear un menú */ .mc-hint { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-glow-soft, rgba(200,105,42,.10)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: var(--r); padding: 0.8rem 0.9rem; font-size:0.964286rem; line-height: 1.4; color: var(--text); margin-bottom: 0.85rem; } .mc-hint-close { margin-left: auto; border: none; background: transparent; cursor: pointer; font-size:1.142857rem; color: var(--muted); padding: 0 2px; min-width: 32px; min-height: 32px; } /* Acordeón de secciones */ .mc-acc { display: flex; flex-direction: column; gap: 0.6rem; } .mc-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; } .mc-sec-head { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--text); -webkit-tap-highlight-color: transparent; } .mc-sec-nombre { font-weight: 700; font-size:1.142857rem; flex: 1; min-width: 0; font-family: var(--font-display, Georgia, serif); } .mc-sec-badge { font-size:0.857143rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .mc-sec-badge.ok { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); } .mc-sec-badge.warn { background: rgba(178,106,0,.12); color: #b26a00; font-weight: 700; } .mc-chev { color: var(--muted); font-size:0.928571rem; transition: transform .2s; } .mc-sec.open .mc-chev { transform: rotate(180deg); } .mc-sec-body { display: none; padding: 0 12px 12px; } .mc-sec.open .mc-sec-body { display: block; } .mc-sec-vacia { font-size:0.928571rem; color: var(--muted); padding: 6px 0 8px; border-top: 1px solid var(--border); } /* Fila de plato dentro de la sección */ .mc-plato-row { display: flex; align-items: center; gap: 6px; min-height: 48px; border-top: 1px solid var(--border); font-size:1.035714rem; } .mc-plato-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; } .mc-plato-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-plato-row.agotado .mc-plato-txt { text-decoration: line-through; color: var(--muted); } .mc-badge-mini { font-size:0.75rem; padding: 2px 6px; border-radius: 6px; font-weight: 700; white-space: nowrap; background: var(--accent-glow-soft, rgba(200,105,42,.10)); color: var(--primary); } .mc-badge-mini.rojo { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } .mc-badge-mini.ambar { background: rgba(178,106,0,.12); color: #b26a00; } .mc-dots { flex: 0 0 44px; height: 44px; border: none; background: transparent; font-size:1.428571rem; color: var(--muted); cursor: pointer; border-radius: 10px; } .mc-dots:active { background: var(--bg); } /* Compatibilidad de platos — ISS-046/ISS-066, Opción A del mockup "Compatibilidad de Platos" (2026-08-25). Siempre visible bajo el plato, un bloque por cada sección opcional relacionada. */ .mc-compat { padding: 0 0 8px; } .mc-compat-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .mc-compat-label { font-size:0.75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } /* Botón "ⓘ" — toggle por CSS puro (checkbox oculto), funciona igual con tap que con click, sin depender de hover (mobile-first). */ .mc-tip-toggle { position: absolute; opacity: 0; width: 0; height: 0; } .mc-info-btn { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size:0.72rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .mc-tip-toggle:checked + .mc-info-btn { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent-strong); } .mc-tip-box { display: none; font-size:0.8rem; line-height: 1.55; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.5rem 0.65rem; margin: 0 0 8px; } .mc-tip-toggle:checked ~ .mc-tip-box { display: block; } .mc-tip-box b { color: var(--text); } .mc-seg3 { display: flex; gap: 4px; } .mc-seg3-opt { flex: 1; min-width: 0; min-height: 44px; padding: 4px 3px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size:0.75rem; font-weight: 700; line-height: 1.25; cursor: pointer; } .mc-seg3-opt.on { font-weight: 900; } .mc-seg3-opt:not(.on-need):not(.on-block).on { background: var(--surface-2); color: var(--text); border-color: var(--border-2); } .mc-seg3-opt.on-need.on { background: var(--success-bg); color: var(--success); border-color: var(--success); } .mc-seg3-opt.on-block.on { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } /* Badge "🆕" — funciones nuevas, ver utils.js badgeNuevo() */ .badge-nuevo { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size:0.75rem; font-weight: 800; cursor: pointer; flex-shrink: 0; line-height: 1; animation: badge-nuevo-pulso 1.8s ease-in-out infinite; } @keyframes badge-nuevo-pulso { 0%,100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .badge-nuevo { animation: none; } } /* "Qué hay de nuevo" — ver novedades.js */ .nov-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; padding: 0; } .nov-sheet { width: 100%; max-width: 480px; max-height: 85vh; background: var(--surface); border-radius: 16px 16px 0 0; border: 1px solid var(--border); border-bottom: none; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .nov-header { padding: 1.1rem 1.5rem 0.8rem; border-bottom: 1px solid var(--border); } .nov-title { font-family: var(--font-display); font-weight: 700; font-size:1.142857rem; color: var(--text); } .nov-body { padding: 0.9rem 1.5rem; overflow-y: auto; flex: 1; } .nov-bloque + .nov-bloque { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border-2); } .nov-fecha { font-size:0.785714rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 0.5rem; } .nov-lista { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; } .nov-lista li { font-size:0.964286rem; line-height: 1.5; color: var(--text); } .nov-btn-cerrar { margin: 0.9rem 1.5rem calc(0.9rem + env(safe-area-inset-bottom)); min-height: 46px; border-radius: 10px; border: none; cursor: pointer; background: var(--accent); color: #fff; font-size:1.035714rem; font-weight: 700; font-family: inherit; } /* Acciones expandidas del plato (al tocar ⋯) */ .mc-plato-acts { display: none; gap: 6px; padding: 0 0 10px; } .mc-plato-acts.open { display: flex; } .mc-mini-act { flex: 1; min-width: 0; min-height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size:0.892857rem; font-weight: 600; cursor: pointer; color: var(--text-2); } .mc-mini-act.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .mc-mini-act.primaria { color: var(--primary); border-color: var(--primary); font-weight: 700; } /* Botón ＋ Platos de cada sección (la acción más frecuente del día) */ .mc-add-platos { width: 100%; min-height: 46px; margin-top: 8px; border-radius: 10px; border: 1.5px dashed var(--primary); background: var(--accent-glow-soft, rgba(200,105,42,.08)); color: var(--primary); font-size:1.035714rem; font-weight: 700; cursor: pointer; } /* Pie de sección: obligatoria/opcional + quitar */ .mc-sec-foot { display: flex; gap: 6px; margin-top: 8px; } .mc-sec-foot button { flex: 1; min-width: 0; min-height: 40px; border-radius: 8px; border: 1px solid var(--border); background: transparent; font-size:0.892857rem; cursor: pointer; color: var(--muted); } .mc-sec-foot .req-on { color: var(--primary); border-color: var(--primary); font-weight: 700; } /* Explicación permanente de obligatoria/opcional — antes solo se avisaba con un toast que se esfumaba a los 3s (ver ISS-069, conversación 2026-08-25) */ .mc-sec-hint-req { font-size:0.928571rem; color: var(--muted); margin-top: 6px; line-height: 1.35; } /* ＋ Agregar sección (acción rara, al final de la lista) */ .mc-add-sec { width: 100%; min-height: 48px; margin-top: 0.6rem; border-radius: var(--r); border: 1.5px dashed var(--border); background: transparent; color: var(--muted); font-size:1.035714rem; font-weight: 600; cursor: pointer; } /* Fila del alta rápida de sección (1 tap: Obligatoria u Opcional) */ .mc-addsec-row { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .mc-addsec-row .mc-mini-act { flex: 0 0 auto; padding: 0 12px; } .mc-addsec-nombre { flex: 1; min-width: 0; font-weight: 700; font-size:1.071429rem; color: var(--text); } /* Sin secciones aún */ .mc-empty-sec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; color: var(--muted); font-size:1rem; border: 1px dashed var(--border); border-radius: var(--r); padding: 2rem 1.1rem; background: var(--bg); } /* ── Pantalla Home ───────────────────────────────────────── */ .home-welcome { padding: 0.5rem 0 1rem; } .home-greeting { font-size: 1.1rem; font-weight: 700; color: var(--text); font-family: var(--font-display, Georgia, serif); } .home-restaurant { font-size:0.928571rem; color: var(--muted, #888); margin-top: 2px; } /* Mobile: carrusel horizontal con cards portrait grandes */ .home-carousel { display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; overflow-y: visible; padding: 0.5rem 0 1.25rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .home-carousel::-webkit-scrollbar { display: none; } .home-card { flex: 0 0 230px; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.75rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; scroll-snap-align: start; text-align: center; transition: transform .15s, border-color .15s, background .15s; box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.06)); -webkit-tap-highlight-color: transparent; } .home-card:active { transform: scale(.97); border-color: var(--primary, #c8692a); background: var(--accent-glow-soft, rgba(200,105,42,.06)); } .home-card-emoji { font-size: 3rem; line-height: 1; } .home-card-title { font-weight: 700; font-size: 1rem; color: var(--text); font-family: var(--font-display, Georgia, serif); line-height: 1.2; } .home-card-desc { font-size:0.928571rem; color: var(--muted, #888); line-height: 1.5; } .home-card-cta { font-size:0.928571rem; font-weight: 600; color: var(--primary, #c8692a); margin-top: 0.4rem; } /* Desktop: grid 2×2 centrado */ @media (min-width: 768px) { .home-carousel { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; } .home-card { flex: 0 0 calc(50% - 0.5rem); min-height: 200px; } } /* Botón "← Volver" en paneles */ .btn-back-home { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer; color: var(--primary, #c8692a); font-size:1rem; font-weight: 600; padding: 8px 0 12px; min-height: 44px; -webkit-tap-highlight-color: transparent; } .btn-back-home:active { opacity: 0.65; } /* Botón Home en topbar */ .home-btn { background: none; border: none; cursor: pointer; font-size: 1.35rem; line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; transition: background .15s; -webkit-tap-highlight-color: transparent; } .home-btn:active { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* Hub de configuración — 2 opciones como cards de elección */ .mc-hub { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0; } .mc-hub-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; width: 100%; box-sizing: border-box; text-align: left; padding: 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r, 14px); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.06)); -webkit-tap-highlight-color: transparent; } .mc-hub-card:active { transform: scale(.99); border-color: var(--primary, #c8692a); background: var(--accent-glow-soft, rgba(200,105,42,.06)); } .mc-hub-emoji { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.2rem; } .mc-hub-title { display: block; font-weight: 700; font-size: 1rem; color: var(--text); font-family: var(--font-display, Georgia, serif); } .mc-hub-desc { display: block; font-size:0.928571rem; color: var(--muted, #888); line-height: 1.4; } .mc-hub-cta { display: block; font-size:0.928571rem; font-weight: 600; color: var(--primary, #c8692a); margin-top: 0.4rem; } /* ── Stepper de pasos: Secciones → Platos → Menú del día ── */ .md-stepper { display: flex; align-items: flex-start; padding: 0.5rem 0 1rem; } .md-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; cursor: pointer; text-align: center; padding: 0.4rem 0.15rem; border-radius: var(--r, 12px); transition: background .12s; -webkit-tap-highlight-color: transparent; } .md-step:active { background: var(--bg, #f5f1ed); } .md-step-num { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size:0.928571rem; font-weight: 800; background: var(--bg); border: 2px solid var(--border); color: var(--muted); transition: background .2s, border-color .2s, color .2s; } .md-step-title { font-size:0.857143rem; font-weight: 700; color: var(--muted); line-height: 1.2; transition: color .2s; } .md-step-desc { font-size:0.785714rem; color: var(--muted); opacity: .75; line-height: 1.3; } .md-step-line { flex: 0 0 16px; height: 2px; background: var(--border); margin-top: 20px; /* centra con el círculo de 32px + 8px de padding-top */ flex-shrink: 0; } /* Paso activo */ .md-step.active .md-step-num { background: var(--primary, #c8692a); border-color: var(--primary, #c8692a); color: #fff; } .md-step.active .md-step-title { color: var(--primary, #c8692a); } .md-step.active .md-step-desc { opacity: 1; color: var(--text-2, #555); } /* Botón ? de cada paso */ .md-step-help { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border); background: var(--bg); color: var(--muted, #888); font-size:0.714286rem; font-weight: 800; cursor: pointer; margin-top: 3px; transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .md-step-help:active { background: var(--primary); border-color: var(--primary); color: #fff; } .md-step.active .md-step-help { border-color: var(--primary, #c8692a); color: var(--primary, #c8692a); } /* Callout de ayuda inline */ .md-help-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r, 12px); padding: 0.85rem 2.75rem 0.85rem 1rem; margin-bottom: 0.5rem; box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.06)); } .md-help-text { font-size:0.928571rem; color: var(--text-2, #555); line-height: 1.55; margin: 0; } .md-help-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg); color: var(--muted); font-size:1.142857rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; } .md-help-close:active { background: var(--border); } /* ── Secciones — galería de chips ──────────────────────── */ .sec-gallery { display: flex; flex-direction: column; gap: 0.85rem; } .sec-create-btn { width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--primary, #c8692a); background: var(--primary, #c8692a); color: #fff; font-size:1.071429rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s, opacity .15s; -webkit-tap-highlight-color: transparent; } .sec-create-btn:active { transform: scale(.99); } .sec-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .sec-chip { display: inline-flex; align-items: center; gap: 0; height: 44px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,.06)); overflow: hidden; } .sec-chip-name { font-size:1.071429rem; font-weight: 600; color: var(--text); padding: 0 0.4rem 0 1.1rem; white-space: nowrap; } .sec-chip-del { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: none; background: transparent; color: var(--muted, #888); font-size:1.428571rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; } .sec-chip-del:hover { background: var(--danger, #c0392b); color: #fff; } .sec-chip-del:active { background: var(--danger, #c0392b); color: #fff; } /* Descripción en card de plato de menú */ .pm-plate-desc { font-size:0.928571rem; color: var(--muted, #888); line-height: 1.4; margin: 0; position: relative; z-index: 2; } .mw-menu-card.has-photo .pm-plate-desc { color: rgba(255,255,255,.78); } /* Desktop: galería de platos — ocupa todo el ancho del panel y hace grid responsivo. Usamos el ID del mount para ganar especificidad sobre los estilos inyectados del widget. */ @media (min-width: 768px) { #platos-menu-mount .mw, #platos-carta-mount .mw { max-width: none; } #platos-menu-mount .pm-plate-gallery, #platos-carta-mount .pc-plate-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow-x: visible; scroll-snap-type: none; } #platos-menu-mount .mw-menu-card, #platos-carta-mount .mw-menu-card { flex: unset; max-width: none; min-height: 360px; } #platos-menu-mount .mw-empty-card, #platos-carta-mount .mw-empty-card { flex: unset; max-width: none; min-height: 200px; grid-column: 1 / -1; } } /* Desktop: Menú del día — galería de menús ocupa todo el ancho del panel */ @media (min-width: 768px) { #menu-wizard-mount .mw { max-width: none; } #menu-wizard-mount .mw-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow-x: visible; scroll-snap-type: none; } #menu-wizard-mount .mw-menu-card { flex: unset; max-width: none; min-height: 400px; } #menu-wizard-mount .mw-empty-card { flex: unset; max-width: none; grid-column: 1 / -1; } /* Wizard de creación (3 pasos): centrado y contenido */ #menu-wizard-mount .mw-wizard { max-width: 560px; margin-left: auto; margin-right: auto; } } /* Desktop: el acordeón de secciones queda en una columna cómoda y centrada (mismo criterio que el wizard de creación .mw-wizard) */ @media (min-width: 768px) { #menu-wizard-mount .mw-config { max-width: 560px; margin-left: auto; margin-right: auto; } } /* ────────────────────────────────────────────────────────────── PENSIONISTAS — panel del owner (pensionistas.md §6) Cards y no tabla: el saldo es el dato que la dueña mira de reojo y en 360px una tabla lo esconde detrás de scroll horizontal. ────────────────────────────────────────────────────────────── */ .pen-aviso { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.85rem; font-size: 0.928571rem; font-weight: 600; line-height: 1.35; } .pen-list { display: flex; flex-direction: column; gap: 0.75rem; } .pen-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; } .pen-card.inactivo { opacity: 0.62; } .pen-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; } .pen-id { min-width: 0; flex: 1; } .pen-nombre { font-weight: 700; font-size: 1.071429rem; line-height: 1.25; word-break: break-word; } .pen-meta { font-size: 0.857143rem; color: var(--muted); margin-top: 2px; word-break: break-all; line-height: 1.3; } /* El saldo es lo primero que se lee: número grande y alineado a la derecha */ .pen-saldo { flex: 0 0 auto; text-align: right; } .pen-saldo-num { display: block; font-size: 1.428571rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; } .pen-saldo-lbl { display: block; font-size: 0.714286rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-top: 2px; } .pen-saldo.bajo .pen-saldo-num { color: #b45309; } .pen-saldo.bajo .pen-saldo-lbl { color: #b45309; } .pen-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pen-acciones .btn { min-height: 44px; } .pen-baja { color: var(--danger, #c0392b); } /* Historial de movimientos, desplegable dentro de la card */ .pen-movs { border-top: 1px dashed var(--border); padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; } /* El `display:flex` de arriba pisa el `display:none` que el navegador le da a [hidden], así que cerrar el historial no lo ocultaba. Hay que decirlo explícito. */ .pen-movs[hidden] { display: none; } .pen-movs-vacio { font-size: 0.928571rem; color: var(--muted); } .pen-mov { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-size: 0.928571rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); } .pen-mov:last-child { border-bottom: none; padding-bottom: 0; } .pen-mov-tipo { font-weight: 700; } .pen-mov-tipo.recarga { color: #2c6b4f; } .pen-mov-tipo.consumo { color: var(--text-2); } .pen-mov-monto { font-weight: 800; font-variant-numeric: tabular-nums; } .pen-mov-monto.recarga { color: #2c6b4f; } .pen-mov-monto.consumo { color: var(--text-2); } .pen-mov-saldo { font-size: 0.857143rem; color: var(--muted); font-variant-numeric: tabular-nums; } .pen-mov-fecha { font-size: 0.857143rem; color: var(--muted); margin-left: auto; white-space: nowrap; } .pen-mov-nota { flex: 1 0 100%; font-size: 0.857143rem; color: var(--text-2); font-style: italic; }