/* ================================================= WOKI Merchant — Dark Mode Overrides v2 Activado con: html.dark (clase en ) ================================================= */ /* ══ 1. FONDO BASE ══════════════════════════════════════════════ */ html.dark, html.dark body { background-color: #0f172a !important; color: #f1f5f9; } /* Wrapper raíz — cubre el bg-[#f2f2f7] y cualquier Tailwind arbitrario */ html.dark .flex.h-screen.overflow-hidden { background-color: #0f172a !important; } /* ── Topbar y barra de salones (fondos blancos inline) ── */ html.dark #dashboard-topbar { background: rgba(15,23,42,0.95) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } html.dark #salon-tabs-wrap { background: #0f172a !important; border-bottom-color: #1e293b !important; } html.dark #salon-tabs-bar { background: transparent !important; } /* ── Contenedor principal + columna interna ── */ html.dark main, html.dark #salon-views-container, html.dark #salon-plano-fit, html.dark .flex.flex-1.flex-col.h-screen.overflow-hidden { background-color: #0f172a !important; } /* ── Botones del topbar con fondo inline blanco ── */ html.dark #dashboard-topbar button[onclick="toggleVista()"], html.dark #dashboard-topbar button[style*="rgba(255,255,255"] { background: rgba(255,255,255,0.08) !important; color: #cbd5e1 !important; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.1) !important; } html.dark #dashboard-topbar .w-px { background-color: rgba(255,255,255,0.1) !important; } html.dark #dashboard-topbar #reloj-actual { color: #94a3b8 !important; } /* ══ 2. FONDOS ESTRUCTURALES ════════════════════════════════════ Niveles: página=#0f172a carta=#1e293b elevado=#253347 hover=#334155 ══════════════════════════════════════════════════════════════════ */ html.dark aside, html.dark [class~="bg-white"] { background-color: #1e293b !important; } html.dark [class~="bg-slate-50"] { background-color: #1e293b !important; } html.dark [class~="bg-slate-100"]{ background-color: #253347 !important; } html.dark [class~="bg-slate-200"]{ background-color: #334155 !important; } /* bg-slate-900 = énfasis/botón activo → gris medio visible sobre #1e293b */ html.dark [class~="bg-slate-900"]{ background-color: #334155 !important; } /* ══ 3. TEXTO SLATE ══════════════════════════════════════════════ Regla: cada nivel sube en luminosidad para mantener jerarquía ══════════════════════════════════════════════════════════════════ */ html.dark [class~="text-slate-900"] { color: #f1f5f9 !important; } html.dark [class~="text-slate-800"] { color: #e2e8f0 !important; } html.dark [class~="text-slate-700"] { color: #cbd5e1 !important; } html.dark [class~="text-slate-600"] { color: #94a3b8 !important; } html.dark [class~="text-slate-500"] { color: #94a3b8 !important; } /* slate-400 en light = gris medio → en dark debe ser legible como "dim" */ html.dark [class~="text-slate-400"] { color: #64748b !important; } html.dark [class~="text-slate-300"] { color: #94a3b8 !important; } /* ══ 4. BORDES ═══════════════════════════════════════════════════ */ html.dark [class~="border-slate-100"] { border-color: #253347 !important; } html.dark [class~="border-slate-200"] { border-color: #334155 !important; } html.dark [class~="border-slate-300"] { border-color: #475569 !important; } html.dark [class~="border-dashed"] { border-color: #334155 !important; } /* ══ 5. HOVER / INTERACTIVOS ══════════════════════════════════════ */ html.dark [class~="hover:bg-slate-50"]:hover { background-color: #253347 !important; } html.dark [class~="hover:bg-slate-100"]:hover { background-color: #334155 !important; } html.dark [class~="hover:bg-slate-200"]:hover { background-color: #475569 !important; } /* ══ 6. ESTADOS DE MESAS ═════════════════════════════════════════ Cada estado: fondo oscuro del tono + texto de la variante CLARA para garantizar contraste óptimo sobre dark background. ══════════════════════════════════════════════════════════════════ */ /* — Menú / Escaneo — sky (azul) — */ html.dark [class~="bg-sky-50"] { background-color: #0a2030 !important; } html.dark [class~="bg-sky-100"] { background-color: #0c2a40 !important; } html.dark [class~="text-sky-700"] { color: #38bdf8 !important; } html.dark [class~="text-sky-600"] { color: #7dd3fc !important; } html.dark [class~="text-sky-500"] { color: #38bdf8 !important; } html.dark [class~="border-sky-400"]{ border-color: #0284c7 !important; } /* — Eligiendo — amber (amarillo) — */ html.dark [class~="bg-amber-50"] { background-color: #1e1400 !important; } html.dark [class~="bg-amber-100"] { background-color: #281b00 !important; } html.dark [class~="text-amber-700"] { color: #fbbf24 !important; } html.dark [class~="text-amber-800"] { color: #fde68a !important; } html.dark [class~="text-amber-600"] { color: #fcd34d !important; } html.dark [class~="border-amber-400"]{ border-color: #b45309 !important; } html.dark [class~="border-amber-300"]{ border-color: #92400e !important; } /* — En cocina — orange — */ html.dark [class~="bg-orange-50"] { background-color: #1a0e00 !important; } html.dark [class~="bg-orange-100"] { background-color: #221300 !important; } html.dark [class~="text-orange-700"] { color: #fb923c !important; } html.dark [class~="text-orange-600"] { color: #fdba74 !important; } html.dark [class~="border-orange-500"] { border-color: #c2410c !important; } html.dark [class~="border-orange-600"] { border-color: #9a3412 !important; } /* — Alerta / Demora — red — */ html.dark [class~="bg-red-50"] { background-color: #1f0808 !important; } html.dark [class~="bg-red-100"] { background-color: #280a0a !important; } html.dark [class~="text-red-700"] { color: #f87171 !important; } html.dark [class~="text-red-600"] { color: #fca5a5 !important; } html.dark [class~="text-red-500"] { color: #f87171 !important; } html.dark [class~="border-red-500"] { border-color: #b91c1c !important; } html.dark [class~="border-red-200"] { border-color: #450a0a !important; } html.dark [class~="bg-red-50"] [class~="text-red-700"] { color: #fca5a5 !important; } /* — Listo / Entregado — teal — */ html.dark [class~="bg-teal-50"] { background-color: #031614 !important; } html.dark [class~="bg-teal-100"] { background-color: #042018 !important; } html.dark [class~="text-teal-700"] { color: #2dd4bf !important; } html.dark [class~="text-teal-600"] { color: #5eead4 !important; } html.dark [class~="border-teal-500"] { border-color: #0f766e !important; } /* — Pagado — emerald — */ html.dark [class~="bg-emerald-50"] { background-color: #041e10 !important; } html.dark [class~="bg-emerald-100"] { background-color: #062618 !important; } html.dark [class~="bg-emerald-200"] { background-color: #073220 !important; } html.dark [class~="text-emerald-700"] { color: #34d399 !important; } html.dark [class~="text-emerald-600"] { color: #6ee7b7 !important; } html.dark [class~="text-emerald-800"] { color: #a7f3d0 !important; } html.dark [class~="text-emerald-500"] { color: #34d399 !important; } html.dark [class~="border-emerald-500"]{ border-color: #059669 !important; } html.dark [class~="border-emerald-200"]{ border-color: #064e2a !important; } /* — Violet / cocina pendiente — */ html.dark [class~="bg-violet-50"] { background-color: #0f0920 !important; } html.dark [class~="bg-violet-100"] { background-color: #160c2a !important; } html.dark [class~="text-violet-700"] { color: #a78bfa !important; } html.dark [class~="text-violet-600"] { color: #c4b5fd !important; } html.dark [class~="text-violet-800"] { color: #ddd6fe !important; } html.dark [class~="border-violet-200"]{ border-color: #2e1065 !important; } /* — Indigo / para llevar — */ html.dark [class~="bg-indigo-50"] { background-color: #0c1030 !important; } html.dark [class~="bg-indigo-100"] { background-color: #10143c !important; } html.dark [class~="text-indigo-700"] { color: #818cf8 !important; } html.dark [class~="text-indigo-600"] { color: #a5b4fc !important; } html.dark [class~="text-indigo-500"] { color: #818cf8 !important; } html.dark [class~="border-indigo-200"]{ border-color: #1e1b4b !important; } /* — Purple — */ html.dark [class~="bg-purple-50"] { background-color: #120924 !important; } html.dark [class~="bg-purple-100"] { background-color: #180d30 !important; } html.dark [class~="text-purple-700"]{ color: #c084fc !important; } /* — Green — */ html.dark [class~="bg-green-50"] { background-color: #061508 !important; } html.dark [class~="bg-green-100"] { background-color: #081c0a !important; } html.dark [class~="text-green-700"] { color: #4ade80 !important; } /* — Pink — */ html.dark [class~="bg-pink-50"] { background-color: #1a0612 !important; } html.dark [class~="bg-pink-100"] { background-color: #220819 !important; } html.dark [class~="text-pink-700"] { color: #f472b6 !important; } /* ══ 7. BOTONES DE ZONA / TABS ACTIVOS ══════════════════════════ bg-slate-900 → #334155. Sobre #1e293b la diferencia es sutil; agregamos borde luminoso al activo para que sea inconfundible. ══════════════════════════════════════════════════════════════════ */ html.dark .zona-btn { color: #94a3b8 !important; } html.dark .zona-btn[class~="bg-slate-900"] { background-color: #475569 !important; color: #f1f5f9 !important; outline: 1.5px solid #64748b; outline-offset: 1px; } html.dark .zona-btn:not([class~="bg-slate-900"]):hover { background-color: #334155 !important; color: #e2e8f0 !important; } /* ══ 8. BARRA DE ESTADOS (chips generados por JS) ════════════════ */ html.dark #barra-estados { background-color: #0f172a !important; border-color: #1e293b !important; } /* El chip "Todas" activo usa bg-slate-900 */ html.dark #barra-estados [class~="bg-slate-900"] { background-color: #475569 !important; color: #f1f5f9 !important; outline: 1.5px solid #64748b; outline-offset: 1px; } /* chips inactivos */ html.dark #barra-estados button:not([class~="text-white"]) { border: 1px solid #334155; } /* ══ 9. BARRA DE SALONES ══════════════════════════════════════════ */ html.dark #salon-tabs-bar { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark #salon-tabs-bar [class~="bg-slate-900"] { background-color: #475569 !important; color: #f1f5f9 !important; outline: 1.5px solid #64748b; outline-offset: 1px; } html.dark #salon-tabs-bar [class~="border-slate-200"] { border-color: #334155 !important; color: #94a3b8 !important; } html.dark #salon-tabs-bar button:hover { background-color: #253347 !important; } /* ══ 10. KPI CHIPS ════════════════════════════════════════════════ */ html.dark .kpi-chip { border-color: #334155 !important; } html.dark #kpi-ocupacion { background-color: #1e293b !important; border-color: #334155 !important; } html.dark #kpi-salon { background-color: #0c2a40 !important; border-color: #0284c7 !important; } html.dark #kpi-alertas { background-color: #1f0808 !important; border-color: #7f1d1d !important; } html.dark #card-efectivo { background-color: #1e1400 !important; border-color: #92400e !important; } html.dark #kpi-ventas { background-color: #041e10 !important; border-color: #065f46 !important; } /* ══ 11. PANELES LATERALES ════════════════════════════════════════ */ html.dark #panel-cocina, html.dark #panel-mesa { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .panel-tab { background-color: #253347 !important; border-color: #334155 !important; } /* ══ 12. BANNERS / NOTIFICACIONES ════════════════════════════════ */ html.dark #aviso-sin-servidor { background-color: #1f0808 !important; border-color: #7f1d1d !important; } html.dark #aviso-conectado { background-color: #041e10 !important; border-color: #065f46 !important; } html.dark #notif-efectivo { background-color: #1e1400 !important; border-color: #92400e !important; } html.dark #notif-pendientes { background-color: #0f0920 !important; border-color: #4c1d95 !important; } /* ══ 13. MESA ACTIVA / SELECCIONADA ══════════════════════════════ */ html.dark .mesa.activa { outline-color: #f1f5f9 !important; } /* ══ 14. INPUTS / SELECTS / TEXTAREAS ════════════════════════════ */ html.dark input, html.dark select, html.dark textarea { background-color: #1e293b !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #64748b !important; outline: none; box-shadow: 0 0 0 2px rgba(148,163,184,.2) !important; } /* ══ 15. TABLAS ═══════════════════════════════════════════════════ */ html.dark table { background-color: #1e293b; } html.dark th { background-color: #253347 !important; color: #94a3b8 !important; border-color: #334155 !important; } html.dark td { border-color: #334155 !important; } html.dark tr:hover td { background-color: #253347 !important; } /* ══ 16. CÓDIGO INLINE ════════════════════════════════════════════ */ html.dark code { background-color: #334155 !important; color: #f1f5f9 !important; } /* ══ 17. TOGGLE DARK MODE ════════════════════════════════════════ */ html.dark #btn-dark-mode { color: #e2e8f0; } html.dark #btn-dark-mode:hover { background-color: #334155 !important; } /* ══ 18. EDITOR DE SALÓN ══════════════════════════════════════════ */ html.dark #editor-canvas-wrap { background-color: #0f172a !important; } html.dark #editor-canvas { background-color: #1e293b !important; background-image: radial-gradient(circle, #334155 1px, transparent 1px) !important; box-shadow: 0 4px 28px rgba(0,0,0,.4) !important; } html.dark .editor-mesa { background-color: #253347 !important; border-color: #475569 !important; } html.dark .editor-mesa:hover { box-shadow: 0 4px 16px rgba(0,0,0,.35) !important; } html.dark .editor-mesa.em-selected { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.3) !important; } html.dark .editor-mesa .em-num { color: #cbd5e1 !important; } html.dark .editor-mesa .em-name { color: #64748b !important; } html.dark #editor-topbar { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 2px 12px rgba(0,0,0,.35) !important; } html.dark #editor-salon-label { color: #94a3b8 !important; } /* Tabs dentro del editor */ html.dark #editor-salon-tabs [class~="bg-slate-100"] { background-color: #253347 !important; color: #94a3b8 !important; } html.dark #editor-salon-tabs [class~="bg-slate-100"]:hover { background-color: #334155 !important; } /* ══ 19. MODALES DEL EDITOR ═══════════════════════════════════════ */ html.dark .ed-modal-bg { background: rgba(0,0,0,.75) !important; } html.dark .ed-modal-box { background-color: #1e293b !important; color: #f1f5f9 !important; box-shadow: 0 16px 48px rgba(0,0,0,.5) !important; } html.dark .ed-modal-box h3 { color: #f1f5f9 !important; } html.dark .ed-modal-box p { color: #94a3b8 !important; } html.dark .ed-modal-box input { background-color: #253347 !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark .ed-modal-box button[class~="border-slate-200"] { background-color: #253347 !important; border-color: #475569 !important; color: #cbd5e1 !important; } /* ══ 20. SCROLLBAR PERSONALIZADO ════════════════════════════════= */ html.dark ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark ::-webkit-scrollbar-track { background: #1e293b; } html.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ══ 21. ELEMENTOS CON ESTILOS INLINE / REGLAS CSS NO CUBIERTAS ══ Estos elementos tienen background/color hardcodeados vía style="" o reglas CSS propias que requieren !important explícito. ══════════════════════════════════════════════════════════════════ */ /* — Header principal (topbar) — */ html.dark #dashboard-topbar { background: rgba(15,23,42,0.97) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } /* Botón Vista Kanban / Salón dentro del topbar */ html.dark #dashboard-topbar > div button:not([style*="background:#ff"]) { background: rgba(30,41,59,0.85) !important; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.1) !important; color: #cbd5e1 !important; } html.dark #dashboard-topbar > div button:not([style*="background:#ff"]):hover { background: #334155 !important; color: #f1f5f9 !important; } /* Divisor vertical del topbar */ html.dark #dashboard-topbar .bg-\[#d1d1d6\] { background: #334155 !important; } /* Filtro activo label */ html.dark #filtro-activo-label { background: rgba(255,255,255,0.07) !important; } html.dark #filtro-activo-texto { color: #94a3b8 !important; } html.dark #filtro-activo button { color: #64748b !important; } /* — Barra wrapper de salones (con background:#f8fafc inline) — */ html.dark #salon-tabs-wrap { background: #0f172a !important; border-bottom-color: #1e293b !important; } /* — Alert bar label (inline color:#475569) — */ html.dark #alert-bar-label { color: #94a3b8 !important; } /* ══ 22. KANBAN v3 — macOS dark ══════════════════════════════════ */ /* Fondo del contenedor kanban */ html.dark #vista-kanban { background: #0f172a !important; scrollbar-color: rgba(255,255,255,0.18) transparent !important; } html.dark #vista-kanban::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16) !important; } /* Header de columna — usa rgba inline del COLOR_COL.hBg sobre fondo dark */ html.dark .kb-col-header { background: rgba(255,255,255,0.05) !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.08) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } /* Sobreescribe el bg inline JS pero conserva el tinte de color */ html.dark .kb-col-header[style*="background"] { background: rgba(255,255,255,0.04) !important; } html.dark .kb-col-header-title { color: #f1f5f9 !important; } /* Cards */ html.dark .kb-card { background: rgba(30,41,59,0.92) !important; border: 0.5px solid rgba(255,255,255,0.08) !important; color: #f1f5f9 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.32) !important; backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); } html.dark .kb-card:hover { border-color: rgba(255,255,255,0.18) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3) !important; background: rgba(30,41,59,0.98) !important; } html.dark .kb-card.kb-alerta { background: linear-gradient(135deg, rgba(127,29,29,0.45) 0%, rgba(30,41,59,0.92) 70%) !important; border-color: rgba(239,68,68,0.5) !important; } html.dark .kb-card.kb-alerta:hover { border-color: #ef4444 !important; } html.dark .kb-card-mesa { color: #f8fafc !important; } html.dark .kb-status-dot { box-shadow: 0 0 0 2px rgba(15,23,42,0.95) !important; } html.dark .kb-card-time { background: rgba(255,255,255,0.06) !important; color: #94a3b8 !important; } html.dark .kb-card-time.urgente { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; } html.dark .kb-item { color: #cbd5e1 !important; } html.dark .kb-item-name { color: #e2e8f0 !important; } html.dark .kb-item-qty { color: #fbbf24 !important; } html.dark .kb-item-more { color: #64748b !important; } html.dark .kb-badge-total { background: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } html.dark .kb-action { box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.25) !important; } /* Slot vacío de columna */ html.dark .kb-empty { border-color: rgba(255,255,255,0.1) !important; color: #475569 !important; background: rgba(255,255,255,0.02) !important; } html.dark .kb-col-dragover > .kb-empty { border-color: #0071e3 !important; background: rgba(0,113,227,0.12) !important; color: #60a5fa !important; } /* ══ 23. PICKUP / PARA LLEVAR ════════════════════════════════════ */ html.dark .pickup-order { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html.dark .pickup-order-ready { border-left-color: #059669 !important; } /* ══ 24. PANEL FOOTER BOTONES ════════════════════════════════════ background:rgba(255,255,255,0.8) definido en regla CSS inline ══════════════════════════════════════════════════════════════════ */ html.dark #panel-footer button.border-slate-200 { background: #253347 !important; border-color: #475569 !important; color: #cbd5e1 !important; } html.dark #panel-footer button.border-slate-200:last-child { color: #ff453a !important; } /* ══ 25. SALON — VISTA PLANO Y MESAS ════════════════════════════ #vista-plano tiene background:#f0f4f8 inline. .mesa tiene background/border/color inline vía renderCardEl. !important es necesario para sobreescribir estilos inline. ══════════════════════════════════════════════════════════════════ */ /* Contenedor principal del salón */ html.dark #vista-plano { background: #0f172a !important; border-color: #1e293b !important; box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important; } /* Separadores del grid (ej. "Barra · Entrada") */ html.dark #vista-plano .grid > :not(.mesa) { background-color: #1e293b !important; color: #475569 !important; border-color: #334155 !important; } html.dark [class~="bg-slate-200/80"] { background-color: rgba(51,65,85,0.8) !important; } /* Sombra base de todas las mesas */ html.dark .mesa { box-shadow: 0 1px 6px rgba(0,0,0,0.4), 0 2px 12px rgba(0,0,0,0.25) !important; } /* Fallback: mesa sin estado definido */ html.dark .mesa:not([data-estado]) { background: #1e293b !important; border-color: #334155 !important; } /* — libre — */ html.dark .mesa[data-estado="libre"] { background: #1e293b !important; border-color: #334155 !important; } html.dark .mesa[data-estado="libre"] span { color: #64748b !important; } /* — escaneo / viendo menú — sky */ html.dark .mesa[data-estado="escaneo"], html.dark .mesa[data-estado="viendo"] { background: #0a1f30 !important; border-color: #0ea5e9 !important; } html.dark .mesa[data-estado="escaneo"] span, html.dark .mesa[data-estado="viendo"] span { color: #38bdf8 !important; } /* — eligiendo — amber */ html.dark .mesa[data-estado="eligiendo"] { background: #1e1400 !important; border-color: #d97706 !important; } html.dark .mesa[data-estado="eligiendo"] span { color: #fcd34d !important; } /* — pedido confirmado — violet */ html.dark .mesa[data-estado="pedido"] { background: #160c2a !important; border-color: #7c3aed !important; } html.dark .mesa[data-estado="pedido"] span { color: #c4b5fd !important; } /* — esperando efectivo — amber */ html.dark .mesa[data-estado="esperando_efectivo"] { background: #1e1400 !important; border-color: #d97706 !important; } html.dark .mesa[data-estado="esperando_efectivo"] span { color: #fcd34d !important; } /* — verde (cocina ready) — green */ html.dark .mesa[data-estado="verde"] { background: #061508 !important; border-color: #22c55e !important; } html.dark .mesa[data-estado="verde"] span { color: #4ade80 !important; } /* — en cocina — orange */ html.dark .mesa[data-estado="cocina"] { background: #1a0e00 !important; border-color: #f97316 !important; } html.dark .mesa[data-estado="cocina"] span { color: #fdba74 !important; } /* — alerta / demora — red */ html.dark .mesa[data-estado="alerta"] { background: #1f0808 !important; border-color: #ef4444 !important; } html.dark .mesa[data-estado="alerta"] span { color: #fca5a5 !important; } /* — entregado — teal */ html.dark .mesa[data-estado="entregado"] { background: #031614 !important; border-color: #14b8a6 !important; } html.dark .mesa[data-estado="entregado"] span { color: #5eead4 !important; } /* — en mesa — blue */ html.dark .mesa[data-estado="en_mesa"] { background: #0c1030 !important; border-color: #3b82f6 !important; } html.dark .mesa[data-estado="en_mesa"] span { color: #93c5fd !important; } /* — cobrar — orange */ html.dark .mesa[data-estado="cobrar"] { background: #1a0e00 !important; border-color: #ea580c !important; } html.dark .mesa[data-estado="cobrar"] span { color: #fdba74 !important; } /* — pagado / consumiendo / completado — emerald */ html.dark .mesa[data-estado="pagado"], html.dark .mesa[data-estado="consumiendo"], html.dark .mesa[data-estado="completado"] { background: #041e10 !important; border-color: #10b981 !important; } html.dark .mesa[data-estado="pagado"] span, html.dark .mesa[data-estado="consumiendo"] span, html.dark .mesa[data-estado="completado"] span { color: #6ee7b7 !important; } /* ══ 26. FULLSCREEN — garantía de que todo es visible ════════════ Cubre modo claro Y oscuro. Todos los overlays/modales/toasts usan position:fixed o position:absolute y funcionan con document.documentElement.requestFullscreen() sin cambios. Solo aseguramos que el fondo base sea correcto. ══════════════════════════════════════════════════════════════════ */ /* Modo claro en fullscreen: fondo neutro para el viewport */ html.is-fullscreen, html.is-fullscreen body { background-color: #f2f2f7 !important; } /* Modo oscuro en fullscreen: fondo oscuro */ html.dark.is-fullscreen, html.dark.is-fullscreen body { background-color: #0f172a !important; } /* Modales: siempre sobre todo en fullscreen */ html.is-fullscreen #modal-liberar-mesa, html.is-fullscreen #modal-ventas, html.is-fullscreen #editor-overlay, html.is-fullscreen .ed-modal-bg { position: fixed !important; z-index: 9000 !important; } /* Toasts: siempre visibles en fullscreen */ html.is-fullscreen .fixed.top-4.right-4 { position: fixed !important; z-index: 9100 !important; } /* Popup mozo (z-index 9999 inline — no necesita override) */ /* Sidebar y KPI col — ya son fixed, no necesitan cambios */ /* ══ 27. STOCK — JERARQUÍA ════════════════════════════════════════ */ html.dark .jer-prod-row { background-color: #1e293b !important; } html.dark .jer-prod-row:hover { background-color: #253347 !important; } html.dark .jer-subpanel { background-color: #162032 !important; border-color: #334155 !important; } html.dark .jer-item-name { color: #e2e8f0 !important; } html.dark .jer-qty-span { color: #94a3b8 !important; } html.dark [id^="jer-cat-"] > div > .jer-prod-row .text-blue-600 { color: #60a5fa !important; } html.dark .jer-subpanel .text-blue-600 { color: #60a5fa !important; } /* ══ 28. SIDEBAR COMPACTO GLOBAL ═══════════════════════════════ 56px icon-only → 224px on hover. Idéntico al Monitor de Salón. ID selector sobreescribe clases y estilos inline de otras páginas. ══════════════════════════════════════════════════════════════════ */ #sidebar-main { width: 56px; min-width: 0 !important; overflow: hidden; transition: width 0.2s cubic-bezier(0.4,0,0.2,1); z-index: 30; } #sidebar-main:hover { width: 224px; box-shadow: 2px 0 24px rgba(0,0,0,0.10) !important; } .sb-label { opacity: 0; white-space: nowrap; overflow: hidden; transition: opacity 0.12s; flex-shrink: 0; pointer-events: none; } #sidebar-main:hover .sb-label { opacity: 1; pointer-events: auto; } .sb-extra { opacity: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.12s; flex-shrink: 0; } #sidebar-main:hover .sb-extra { opacity: 1; } html.dark #sidebar-main { background: rgba(28,28,30,.42) !important; border-right-color: transparent !important; } html.dark #kpi-col { background: #0f172a !important; border-right-color: rgba(255,255,255,0.06) !important; } html.dark #kpi-col .kpi-vcard { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: none !important; } html.dark #kpi-col .kpi-vcard:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.13) !important; } html.dark #kpi-col .kpi-vval { color: #f2f2f7 !important; } html.dark #kpi-col #kpi-salon-val { color: #0a84ff !important; } html.dark #kpi-col #kpi-ventas-val { color: #30d158 !important; } html.dark #kpi-col #kpi-alertas-val { color: #ff453a !important; } html.dark #kpi-col .kpi-vlabel { color: #48484a !important; } html.dark #sidebar-main [style*="background:rgba(0,113,227"] { background: rgba(255,255,255,0.16) !important; } /* ── 28b. SIDEBAR CÁPSULA GLASS (global, todas las páginas) ── */ aside#sidebar-main { background: rgba(28,28,30,.42) !important; -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); margin: 12px 0 12px 12px; height: calc(100% - 24px) !important; width: 68px; border-radius: 26px; box-shadow: 0 10px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.10) !important; } aside#sidebar-main:hover { width: 232px; border-radius: 26px; box-shadow: 0 14px 40px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.06) !important; } #sidebar-main nav { display: flex; flex-direction: column; justify-content: center; } #sidebar-main:not(:hover) .sb-label, #sidebar-main:not(:hover) .sb-extra, #sidebar-main:not(:hover) #sb-stock-chev { display: none !important; } #sidebar-main nav a, #sidebar-main nav > div > button { justify-content: center; color: #e8e8ed !important; border-radius: 16px; } #sidebar-main:hover nav a, #sidebar-main:hover nav > div > button { justify-content: flex-start; } #sidebar-main nav svg { color: #e8e8ed !important; } #sidebar-main nav a:hover, #sidebar-main nav > div > button:hover { background: rgba(255,255,255,.10) !important; } #sidebar-main .sb-active { background: rgba(255,255,255,.16) !important; color: #fff !important; } #sidebar-main .sb-active svg { color: #fff !important; } #sidebar-main h1 { color: #fff !important; } #sidebar-main > div:first-child { justify-content: center; } #sidebar-main:hover > div:first-child { justify-content: flex-start; } #sidebar-main #btn-dark-mode { color: #e8e8ed !important; } #sidebar-main #btn-dark-mode svg { color: #e8e8ed !important; } #sidebar-main [data-biz-name] { color: #aeaeb2 !important; } /* ══ 29. STOCK — SECTION CARDS (Apple dark identity) ════════════════ Tres tonalidades oscuras distintas: indigo / emerald / amber Box-shadow doble: ring sutil + glow exterior coloreado ═══════════════════════════════════════════════════════════════════ */ /* ── sec-menu-stock (índigo) ── */ html.dark #sec-menu-stock { background: #141824 !important; border-color: rgba(99,102,241,0.22) !important; box-shadow: 0 0 0 1px rgba(99,102,241,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(99,102,241,0.06) !important; } html.dark #sec-menu-stock > div:first-child { background: linear-gradient(90deg, rgba(99,102,241,0.75) 0%, rgba(165,180,252,0.35) 100%) !important; opacity: 0.9; } html.dark #sec-menu-stock .bg-indigo-50 { background-color: rgba(99,102,241,0.18) !important; } html.dark #sec-menu-stock .text-indigo-500 { color: #a5b4fc !important; } html.dark #sec-menu-stock .bg-indigo-50\/50, html.dark #sec-menu-stock [class*="bg-indigo-50"] { background-color: rgba(99,102,241,0.07) !important; } html.dark #sec-menu-stock [class*="border-indigo-100"] { border-color: rgba(99,102,241,0.2) !important; } html.dark #panel-info-ms { background-color: #1a1f32 !important; border-color: rgba(99,102,241,0.2) !important; } /* ── sec-productos-finales (esmeralda) ── */ html.dark #sec-productos-finales { background: #0d1a16 !important; border-color: rgba(16,185,129,0.22) !important; box-shadow: 0 0 0 1px rgba(16,185,129,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(16,185,129,0.06) !important; } html.dark #sec-productos-finales > div:first-child { background: linear-gradient(90deg, rgba(16,185,129,0.75) 0%, rgba(110,231,183,0.35) 100%) !important; opacity: 0.9; } html.dark #sec-productos-finales .bg-emerald-50 { background-color: rgba(16,185,129,0.18) !important; } html.dark #sec-productos-finales .text-emerald-500 { color: #6ee7b7 !important; } html.dark #panel-info-pf { background-color: #111f1a !important; border-color: rgba(16,185,129,0.2) !important; } /* ── sec-materia-prima (ámbar) ── */ html.dark #sec-materia-prima { background: #1a1509 !important; border-color: rgba(245,158,11,0.22) !important; box-shadow: 0 0 0 1px rgba(245,158,11,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(245,158,11,0.06) !important; } html.dark #sec-materia-prima > div:first-child { background: linear-gradient(90deg, rgba(245,158,11,0.75) 0%, rgba(252,211,77,0.35) 100%) !important; opacity: 0.9; } html.dark #sec-materia-prima .bg-amber-50 { background-color: rgba(245,158,11,0.18) !important; } html.dark #sec-materia-prima .text-amber-500 { color: #fcd34d !important; } html.dark #panel-info-mp { background-color: #1e180a !important; border-color: rgba(245,158,11,0.2) !important; } /* ── Panels de ayuda — texto sobre fondo oscuro coloreado ── */ html.dark #panel-info-ms .text-xs, html.dark #panel-info-pf .text-xs, html.dark #panel-info-mp .text-xs { color: #94a3b8 !important; } html.dark #panel-info-ms strong, html.dark #panel-info-pf strong, html.dark #panel-info-mp strong { color: #cbd5e1 !important; } html.dark #panel-info-mp .bg-amber-50\/60 { background-color: rgba(245,158,11,0.08) !important; } html.dark #panel-info-mp .text-amber-700 { color: #fcd34d !important; } html.dark #panel-info-mp .text-amber-500 { color: #fbbf24 !important; } /* ══ 30. CONFIGURACIÓN — SECTION CARDS (Apple dark identity) ════════ Sky (salones) · Violet (mozos) · Amber/Rose/Emerald (marca) ═══════════════════════════════════════════════════════════════════ */ html.dark #cfg-card-salones { background: #0c1827 !important; border-color: rgba(14,165,233,0.22) !important; box-shadow: 0 0 0 1px rgba(14,165,233,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(14,165,233,0.06) !important; } html.dark #cfg-card-salones > div:first-child { background: linear-gradient(90deg,rgba(14,165,233,0.75),rgba(125,211,252,0.35)) !important; } html.dark #cfg-card-salones .bg-sky-50 { background-color: rgba(14,165,233,0.15) !important; } html.dark #cfg-card-salones .text-sky-500 { color: #7dd3fc !important; } html.dark #cfg-card-alertas { background: #091520 !important; border-color: rgba(2,132,199,0.22) !important; box-shadow: 0 0 0 1px rgba(2,132,199,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(2,132,199,0.06) !important; } html.dark #cfg-card-alertas > div:first-child { background: linear-gradient(90deg,rgba(2,132,199,0.75),rgba(56,189,248,0.35)) !important; } html.dark #cfg-card-alertas .bg-sky-50 { background-color: rgba(2,132,199,0.15) !important; } html.dark #cfg-card-alertas .text-sky-500 { color: #38bdf8 !important; } html.dark #cfg-card-mozos { background: #130f24 !important; border-color: rgba(139,92,246,0.22) !important; box-shadow: 0 0 0 1px rgba(139,92,246,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(139,92,246,0.06) !important; } html.dark #cfg-card-mozos > div:first-child { background: linear-gradient(90deg,rgba(139,92,246,0.75),rgba(196,181,253,0.35)) !important; } html.dark #cfg-card-mozos .bg-violet-50 { background-color: rgba(139,92,246,0.15) !important; } html.dark #cfg-card-mozos .text-violet-500 { color: #c4b5fd !important; } html.dark #cfg-card-mozos [style*="background:#fff"] { background: #1e1a2e !important; } html.dark #cfg-card-mozos [style*="border:1.5px solid #e2e8f0"] { border-color: rgba(139,92,246,0.2) !important; } html.dark #cfg-card-membresia { background: #1a1408 !important; border-color: rgba(245,158,11,0.22) !important; box-shadow: 0 0 0 1px rgba(245,158,11,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(245,158,11,0.06) !important; } html.dark #cfg-card-membresia > div:first-child { background: linear-gradient(90deg,rgba(245,158,11,0.75),rgba(252,211,77,0.35)) !important; } html.dark #cfg-card-membresia .bg-amber-50 { background-color: rgba(245,158,11,0.15) !important; } html.dark #cfg-card-membresia .text-amber-500 { color: #fcd34d !important; } html.dark #cfg-card-marca { background: #1f0d12 !important; border-color: rgba(244,63,94,0.22) !important; box-shadow: 0 0 0 1px rgba(244,63,94,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(244,63,94,0.06) !important; } html.dark #cfg-card-marca > div:first-child { background: linear-gradient(90deg,rgba(244,63,94,0.75),rgba(251,113,133,0.35)) !important; } html.dark #cfg-card-marca .bg-rose-50 { background-color: rgba(244,63,94,0.15) !important; } html.dark #cfg-card-marca .text-rose-500 { color: #fb7185 !important; } html.dark #cfg-card-cuenta { background: #0a1f18 !important; border-color: rgba(16,185,129,0.22) !important; box-shadow: 0 0 0 1px rgba(16,185,129,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(16,185,129,0.06) !important; } html.dark #cfg-card-cuenta > div:first-child { background: linear-gradient(90deg,rgba(16,185,129,0.75),rgba(110,231,183,0.35)) !important; } html.dark #cfg-card-cuenta .bg-emerald-50 { background-color: rgba(16,185,129,0.15) !important; } html.dark #cfg-card-cuenta .text-emerald-500 { color: #6ee7b7 !important; } /* ── Comercio: Datos obligatorios (rose) ── */ html.dark #cfg-card-comercio-oblig { background: #1f0d12 !important; border-color: rgba(244,63,94,0.22) !important; box-shadow: 0 0 0 1px rgba(244,63,94,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(244,63,94,0.06) !important; } html.dark #cfg-card-comercio-oblig > div:first-child { background: linear-gradient(90deg,rgba(244,63,94,0.75),rgba(251,113,133,0.35)) !important; } html.dark #cfg-card-comercio-oblig .bg-rose-50 { background-color: rgba(244,63,94,0.15) !important; } html.dark #cfg-card-comercio-oblig .text-rose-500 { color: #fb7185 !important; } /* ── Comercio: Datos recomendados / Perfil del usuario (indigo) ── */ html.dark #cfg-card-comercio-rec, html.dark #cfg-card-perfil { background: #12152b !important; border-color: rgba(99,102,241,0.22) !important; box-shadow: 0 0 0 1px rgba(99,102,241,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(99,102,241,0.06) !important; } html.dark #cfg-card-comercio-rec > div:first-child, html.dark #cfg-card-perfil > div:first-child { background: linear-gradient(90deg,rgba(99,102,241,0.75),rgba(165,180,252,0.35)) !important; } html.dark #cfg-card-comercio-rec .bg-indigo-50, html.dark #cfg-card-comercio-rec .bg-indigo-100, html.dark #cfg-card-perfil .bg-indigo-50, html.dark #cfg-card-perfil .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; } html.dark #cfg-card-comercio-rec .text-indigo-500, html.dark #cfg-card-perfil .text-indigo-500, html.dark #cfg-card-perfil .text-indigo-400 { color: #a5b4fc !important; } /* ── Perfil: Cambiar contraseña (slate) ── */ html.dark #cfg-card-pass { background: #131822 !important; border-color: rgba(100,116,139,0.28) !important; box-shadow: 0 0 0 1px rgba(100,116,139,0.12), 0 4px 32px rgba(0,0,0,0.45) !important; } html.dark #cfg-card-pass > div:first-child { background: linear-gradient(90deg,rgba(100,116,139,0.75),rgba(203,213,225,0.35)) !important; } html.dark #cfg-card-pass .bg-slate-100 { background-color: rgba(100,116,139,0.18) !important; } html.dark #cfg-card-pass .text-slate-500 { color: #cbd5e1 !important; } /* ── Cuenta: Cobros con Mercado Pago (sky) ── */ html.dark #cfg-card-mp { background: #08151f !important; border-color: rgba(14,165,233,0.22) !important; box-shadow: 0 0 0 1px rgba(14,165,233,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(14,165,233,0.06) !important; } html.dark #cfg-card-mp > div:first-child { background: linear-gradient(90deg,rgba(14,165,233,0.75),rgba(125,211,252,0.35)) !important; } html.dark #cfg-card-mp .bg-sky-50 { background-color: rgba(14,165,233,0.15) !important; } html.dark #cfg-card-mp .text-sky-500 { color: #7dd3fc !important; } /* ── Cuenta: Facturación ARCA / AFIP (rose) ── */ html.dark #cfg-card-afip { background: #1f0d12 !important; border-color: rgba(244,63,94,0.22) !important; box-shadow: 0 0 0 1px rgba(244,63,94,0.12), 0 4px 32px rgba(0,0,0,0.45), 0 0 40px rgba(244,63,94,0.06) !important; } html.dark #cfg-card-afip > div:first-child { background: linear-gradient(90deg,rgba(244,63,94,0.75),rgba(251,113,133,0.35)) !important; } html.dark #cfg-card-afip .bg-rose-50 { background-color: rgba(244,63,94,0.15) !important; } html.dark #cfg-card-afip .text-rose-500 { color: #fb7185 !important; }