/* Ocultar elementos no esenciales en móvil */ .hide-mobile { display: none !important; } /* User chip: más compacto */ .user-chip { padding: 6px 10px !important; } .user-chip-name { display: none !important; /* Ocultar nombre en móvil */ } /* Bottom navigation: fijo y visible */ .bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 999 !important; background: white !important; border-top: 1px solid #e2e8f0 !important; padding: 8px 0 !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important; } /* Section headers: más compactos */ .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .section-header h3 { font-size: 0.95rem !important; } /* Charts: responsive */ canvas { max-width: 100% !important; height: auto !important; } /* Grids de formularios: 1 columna */ .form-grid, .settings-grid, .ajustes-form-grid { grid-template-columns: 1fr !important; } } /* EXTRA SMALL: Móviles muy pequeños (< 375px) */ @media (max-width: 374px) { .quick-actions-grid { grid-template-columns: 1fr !important; } .kpi-value { font-size: 1.3rem !important; } .dash-greeting h1 { font-size: 1.1rem !important; } body { font-size: 14px !important; } } /* TABLET: Tamaño intermedio */ @media (min-width: 769px) and (max-width: 1024px) { .sidebar { width: 220px !important; } .main-content-wrap { margin-left: 220px !important; } .dash-main-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ═══════════════════════════════════════════════════════════ FIN RESPONSIVE MOBILE ═══════════════════════════════════════════════════════════ */ .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ===== DASHBOARD MODERNO OPTIVRA ===== */ /* Saludo del día */ .dash-greeting { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-radius: 16px; padding: 24px 28px; color: white; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: relative; overflow: hidden; } .dash-greeting::before { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.05); } .dash-greeting::after { content: ''; position: absolute; right: 60px; bottom: -40px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.04); } .dash-greeting .greeting-text h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; } .dash-greeting .greeting-text p { font-size: 0.9rem; opacity: 0.7; } .dash-greeting .greeting-date { text-align: right; font-size: 0.85rem; opacity: 0.6; } .dash-greeting .greeting-date strong { display: block; font-size: 1.1rem; opacity: 0.9; } /* KPI Cards rediseñadas */ .kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; } .kpi-card { background: white; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; border-left: 4px solid transparent; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .kpi-card.kpi-blue { border-color: #3b82f6; } .kpi-card.kpi-green { border-color: #10b981; } .kpi-card.kpi-amber { border-color: #f59e0b; } .kpi-card.kpi-red { border-color: #ef4444; } .kpi-card.kpi-purple{ border-color: #8b5cf6; } .kpi-card.kpi-cyan { border-color: #06b6d4; } .kpi-card .kpi-top { display: flex; justify-content: space-between; align-items: flex-start; } .kpi-card .kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .kpi-blue .kpi-icon { background: #eff6ff; color: #3b82f6; } .kpi-green .kpi-icon { background: #ecfdf5; color: #10b981; } .kpi-amber .kpi-icon { background: #fffbeb; color: #f59e0b; } .kpi-red .kpi-icon { background: #fef2f2; color: #ef4444; } .kpi-purple.kpi-icon { background: #f5f3ff; color: #8b5cf6; } .kpi-cyan .kpi-icon { background: #ecfeff; color: #06b6d4; } .kpi-card .kpi-label { font-size: 0.78rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .kpi-card .kpi-value { font-size: 1.6rem; font-weight: 800; color: #1e293b; line-height: 1; } .kpi-card .kpi-sub { font-size: 0.75rem; color: #64748b; display: flex; align-items: center; gap: 4px; } .kpi-card .kpi-sub .up { color: #10b981; } .kpi-card .kpi-sub .down { color: #ef4444; } /* Sección acciones rápidas */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .section-header h3 { font-size: 1rem; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; } .section-header h3::before { content: ''; display: block; width: 4px; height: 18px; background: #3b82f6; border-radius: 2px; } .quick-actions-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; } .qa-btn { background: white; border: none; border-radius: 14px; padding: 18px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: all 0.2s; text-decoration: none; color: inherit; } .qa-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.13); } .qa-btn .qa-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .qa-btn .qa-label { font-size: 0.72rem; font-weight: 700; color: #475569; text-align: center; line-height: 1.2; } .qa-btn.qa-venta .qa-icon { background: #eff6ff; color: #2563eb; } .qa-btn.qa-cot .qa-icon { background: #ecfdf5; color: #059669; } .qa-btn.qa-orden .qa-icon { background: #fff7ed; color: #ea580c; } .qa-btn.qa-cita .qa-icon { background: #faf5ff; color: #7c3aed; } .qa-btn.qa-cliente .qa-icon { background: #fef2f2; color: #dc2626; } .qa-btn.qa-examen .qa-icon { background: #ecfeff; color: #0891b2; } /* 3 columnas principales del dashboard */ .dash-main-grid { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 16px; margin-bottom: 20px; } /* Actividad del día */ .actividad-hoy-list { display: flex; flex-direction: column; gap: 8px; } .act-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #f1f5f9; transition: background 0.15s; } .act-item:hover { background: #f1f5f9; } .act-item .act-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .act-item .act-info { flex: 1; min-width: 0; } .act-item .act-info .act-title { font-size: 0.82rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .act-item .act-info .act-meta { font-size: 0.73rem; color: #94a3b8; margin-top: 1px; } .act-item .act-badge { flex-shrink: 0; } .act-monto { font-size: 0.82rem; font-weight: 700; color: #059669; white-space: nowrap; } /* Alertas Inteligentes */ .alertas-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; } .alerta-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid transparent; } .alerta-item.alerta-danger { background: #fff1f2; border-color: #ef4444; } .alerta-item.alerta-warning { background: #fffbeb; border-color: #f59e0b; } .alerta-item.alerta-info { background: #eff6ff; border-color: #3b82f6; } .alerta-item.alerta-success { background: #ecfdf5; border-color: #10b981; } .alerta-item .alerta-icon { font-size: 1rem; margin-top: 1px; flex-shrink: 0; } .alerta-danger .alerta-icon { color: #ef4444; } .alerta-warning .alerta-icon { color: #f59e0b; } .alerta-info .alerta-icon { color: #3b82f6; } .alerta-success .alerta-icon { color: #10b981; } .alerta-item .alerta-text p { font-size: 0.8rem; font-weight: 700; color: #1e293b; } .alerta-item .alerta-text small { font-size: 0.71rem; color: #64748b; } /* Ventas Rápidas */ .ventas-rapidas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .vr-btn { background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 16px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.2s; color: inherit; } .vr-btn:hover { border-color: #3b82f6; background: #eff6ff; transform: translateY(-2px); } .vr-btn .vr-icon { font-size: 1.6rem; } .vr-btn .vr-label { font-size: 0.75rem; font-weight: 700; color: #475569; text-align: center; } .vr-btn .vr-price { font-size: 0.7rem; color: #94a3b8; } /* Resumen del negocio bottom row */ .resumen-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; } .resumen-card { background: white; border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; } .resumen-card .res-icon { font-size: 1.8rem; margin-bottom: 8px; } .resumen-card .res-label { font-size: 0.72rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .resumen-card .res-value { font-size: 1.4rem; font-weight: 800; color: #1e293b; } .resumen-card .res-sub { font-size: 0.72rem; color: #64748b; margin-top: 4px; } /* Clientes importantes */ .clientes-list { display: flex; flex-direction: column; gap: 8px; } .cliente-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #f1f5f9; } .cliente-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; } .cliente-row .cli-info { flex: 1; min-width: 0; } .cliente-row .cli-name { font-size: 0.83rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cliente-row .cli-meta { font-size: 0.72rem; color: #94a3b8; } .cliente-row .cli-monto { font-size: 0.82rem; font-weight: 700; color: #059669; white-space: nowrap; } /* Dash 2-col layout */ .dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .dash-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; } /* Charts wrapper */ .chart-wrapper { position: relative; height: 240px; } /* Separador de secciones */ .dash-section { background: white; border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* Empty state */ .dash-empty { text-align: center; padding: 30px; color: #94a3b8; font-size: 0.83rem; } .dash-empty i { font-size: 2rem; margin-bottom: 8px; display: block; } /* Responsive dashboard */ @media (max-width: 1200px) { .dash-main-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .dash-main-grid, .dash-2col, .dash-3col { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2,1fr); } .quick-actions-grid { grid-template-columns: repeat(3,1fr); } .ventas-rapidas-grid, .resumen-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 500px) { .kpi-grid { grid-template-columns: repeat(2,1fr); } .quick-actions-grid { grid-template-columns: repeat(2,1fr); } } /* ============================================ OPTIVRA v8 — RESPONSIVE + ROLES + APP UI ============================================ */ /* ---- VARIABLES ---- */ :root { --sidebar-w: 260px; --bottom-nav-h: 64px; --accent: #3b82f6; --accent2: #6366f1; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --dark: #1e293b; --surface: #f8fafc; --card-radius: 16px; --transition: 0.22s cubic-bezier(.4,0,.2,1); } /* ---- GLOBAL TRANSITIONS ---- */ .module-content { transition: opacity var(--transition); } .module-content.active { animation: fadeSlideIn 0.25s ease; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- SIDEBAR RESPONSIVE ---- */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform var(--transition); z-index: 200; } .sidebar.mobile-open { transform: translateX(0); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; } .sidebar-overlay.active { display: block; } .ml-64 { margin-left: 0 !important; } .main-content-wrap { padding-bottom: calc(var(--bottom-nav-h) + 8px); } } /* ---- DASHBOARD RESPONSIVE ---- */ /* Móvil pequeño: 320px - 480px */ @media (max-width: 480px) { /* KPI metrics: 1 columna completa */ .dashboard-kpi-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 !important; } /* Acciones rápidas: 2 columnas */ .dashboard-actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Gráficas y contenedores: 1 columna */ #module-dashboard [style*="grid-template-columns:1fr 1.6fr"] { grid-template-columns: 1fr !important; } /* Reducir padding general */ #module-dashboard > div[style*="padding:28px 32px"], #module-dashboard > div[style*="padding:20px 32px"] { padding: 12px 16px !important; } /* Header dashboard: stack vertical */ #module-dashboard > div[style*="padding:20px 32px"] > div { flex-direction: column !important; align-items: flex-start !important; } } /* Móvil grande / Tablet pequeña: 481px - 768px */ @media (min-width: 481px) and (max-width: 768px) { /* KPI metrics: 2 columnas */ .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } /* Acciones rápidas: 3 columnas */ .dashboard-actions-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } /* Gráficas: 1 columna */ #module-dashboard [style*="grid-template-columns:1fr 1.6fr"] { grid-template-columns: 1fr !important; } /* Reducir padding */ #module-dashboard > div[style*="padding:28px 32px"], #module-dashboard > div[style*="padding:20px 32px"] { padding: 16px 20px !important; } } /* Tablet / Laptop pequeña: 769px - 1024px */ @media (min-width: 769px) and (max-width: 1024px) { /* KPI metrics: 2 columnas */ .dashboard-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } /* Acciones rápidas: 4 columnas */ .dashboard-actions-grid { grid-template-columns: repeat(4, 1fr) !important; } /* Reducir padding ligeramente */ #module-dashboard > div[style*="padding:28px 32px"] { padding: 24px 28px !important; } } /* Laptop / Desktop pequeño: 1025px - 1366px */ @media (min-width: 1025px) and (max-width: 1366px) { /* KPI metrics: 4 columnas (original) */ .dashboard-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; } /* Acciones rápidas: 6 columnas (original) */ .dashboard-actions-grid { grid-template-columns: repeat(6, 1fr) !important; } } /* Desktop grande: 1367px+ */ @media (min-width: 1367px) { /* Mantener diseño original */ .dashboard-kpi-grid { grid-template-columns: repeat(4, 1fr) !important; } .dashboard-actions-grid { grid-template-columns: repeat(6, 1fr) !important; } } @media (min-width: 769px) { .bottom-nav { display: none !important; } .sidebar-overlay { display: none !important; } } /* ---- BOTTOM NAV (mobile) ---- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: white; border-top: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-around; z-index: 150; box-shadow: 0 -4px 20px rgba(0,0,0,0.08); } .bn-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; border: none; background: none; cursor: pointer; color: #94a3b8; transition: color var(--transition); flex: 1; min-width: 0; } .bn-item.active { color: var(--accent); } .bn-item i { font-size: 1.35rem; } .bn-item span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .bn-more-panel { display: none; position: fixed; bottom: var(--bottom-nav-h); left: 0; right: 0; background: white; border-top: 1px solid #e2e8f0; padding: 16px; z-index: 149; box-shadow: 0 -8px 30px rgba(0,0,0,0.1); border-radius: 20px 20px 0 0; max-height: 70vh; overflow-y: auto; } .bn-more-panel.open { display: block; animation: slideUp 0.25s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } } .bn-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .bn-more-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: #f8fafc; border-radius: 12px; border: none; cursor: pointer; color: #475569; transition: all var(--transition); } .bn-more-item:hover, .bn-more-item:active { background: #eff6ff; color: var(--accent); } .bn-more-item i { font-size: 1.3rem; } .bn-more-item span { font-size: 0.65rem; font-weight: 700; text-align: center; line-height: 1.2; } /* ---- NOTIFICATION BELL ---- */ .notif-btn { position: relative; background: none; border: none; cursor: pointer; color: #64748b; font-size: 1.2rem; padding: 6px; transition: color var(--transition); } .notif-btn:hover { color: var(--accent); } .notif-badge { position: absolute; top: 0; right: 0; background: var(--danger); color: white; font-size: 0.6rem; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; } .notif-panel { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 340px; background: white; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 300; border: 1px solid #e2e8f0; overflow: hidden; } .notif-panel.open { display: block; animation: fadeSlideIn 0.2s ease; } .notif-header { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } .notif-header h4 { font-size: 0.9rem; font-weight: 700; color: var(--dark); } .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f8fafc; cursor: pointer; transition: background var(--transition); } .notif-item:hover { background: #f8fafc; } .notif-item.unread { background: #eff6ff; } .notif-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .notif-item .notif-text p { font-size: 0.8rem; font-weight: 600; color: var(--dark); line-height: 1.3; } .notif-item .notif-text small { font-size: 0.7rem; color: #94a3b8; } .notif-empty { text-align: center; padding: 32px; color: #94a3b8; font-size: 0.83rem; } .notif-empty i { font-size: 2rem; margin-bottom: 8px; display: block; } .notif-footer { padding: 10px 16px; border-top: 1px solid #f1f5f9; text-align: center; } .notif-footer button { background: none; border: none; color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; } /* ---- ROLE PILL ---- */ .role-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; } .role-administrador { background: #fee2e2; color: #dc2626; } .role-gerente { background: #fef3c7; color: #d97706; } .role-vendedor { background: #dbeafe; color: #2563eb; } .role-optometrista { background: #d1fae5; color: #059669; } .role-recepcionista { background: #f3e8ff; color: #7c3aed; } /* ---- TOPBAR RESPONSIVE ---- */ .topbar-right { display: flex; align-items: center; gap: 10px; position: relative; } .user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 10px; border-radius: 50px; background: #f1f5f9; border: none; transition: background var(--transition); } .user-chip:hover { background: #e2e8f0; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.75rem; flex-shrink: 0; } .user-chip-name { font-size: 0.8rem; font-weight: 700; color: var(--dark); } @media (max-width: 500px) { .user-chip-name { display: none; } } /* ---- SIDEBAR ACTIVE ITEM ---- */ .sidebar .menu-item.active-menu { background: rgba(59,130,246,0.15) !important; color: #93c5fd !important; border-left: 3px solid var(--accent); } /* ---- SETTINGS PANEL (Ajustes) ---- */ .settings-grid { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: 500px; } @media(max-width:768px) { .settings-grid { grid-template-columns: 1fr; } } .settings-nav { border-right: 1px solid #e2e8f0; padding: 8px; } .settings-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; color: #475569; font-size: 0.85rem; font-weight: 600; transition: all var(--transition); } .settings-nav-item:hover { background: #f1f5f9; } .settings-nav-item.active { background: #eff6ff; color: var(--accent); } .settings-nav-item .sni-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .settings-panel { padding: 24px; } .settings-section { display: none; } .settings-section.active { display: block; animation: fadeSlideIn 0.2s ease; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #f1f5f9; } .settings-row:last-child { border: none; } .settings-row .sr-label { font-size: 0.85rem; font-weight: 700; color: var(--dark); } .settings-row .sr-sub { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 24px; transition: .3s; } .toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); } /* ---- PLANES SECTION ---- */ .plan-card-v2 { background: white; border-radius: 20px; padding: 28px 24px; border: 2px solid #e2e8f0; transition: all var(--transition); position: relative; overflow: hidden; } .plan-card-v2:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(59,130,246,0.15); } .plan-card-v2.recommended { border-color: var(--accent); box-shadow: 0 8px 30px rgba(59,130,246,0.12); } .plan-ribbon { position: absolute; top: 16px; right: -12px; background: var(--accent); color: white; font-size: 0.65rem; font-weight: 800; padding: 4px 20px; transform: rotate(15deg); letter-spacing: 0.5px; } .plan-icon-big { font-size: 2.5rem; margin-bottom: 12px; } .plan-name-v2 { font-size: 1.1rem; font-weight: 800; color: var(--dark); margin-bottom: 4px; } .plan-price-v2 { font-size: 2.2rem; font-weight: 900; color: var(--dark); line-height: 1; } .plan-price-v2 span { font-size: 0.9rem; font-weight: 400; color: #94a3b8; } .plan-features-v2 { list-style: none; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 8px; } .plan-features-v2 li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #475569; } .plan-features-v2 li i { color: var(--success); font-size: 0.75rem; flex-shrink: 0; } .plan-btn-v2 { width: 100%; padding: 12px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; cursor: pointer; border: none; transition: all var(--transition); } /* ---- PROFILE COMPANY SECTION ---- */ .profile-hero { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-radius: var(--card-radius); padding: 28px; color: white; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; } .company-logo-circle { width: 80px; height: 80px; border-radius: 20px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; flex-shrink: 0; box-shadow: 0 4px 20px rgba(99,102,241,0.4); } /* ---- TOUCH IMPROVEMENTS ---- */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 44px; } .btn-sm { min-height: 38px; } input, select, textarea { font-size: 16px !important; } } /* ---- ROLE VISIBILITY ---- */ [data-roles] { display: none; } [data-roles].role-visible { display: block; } .sidebar .menu-item[data-roles] { display: none; } .sidebar .menu-item[data-roles].role-visible { display: flex; } /* ---- MOBILE MODULE PADDING ---- */ @media (max-width: 768px) { .module-content.active.p-6 { padding: 14px; } .dash-main-grid { grid-template-columns: 1fr !important; } .quick-actions-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ============================================================ RESPONSIVE CSS COMPLETO - SISTEMA Breakpoints: 480px, 768px, 1024px, 1440px ============================================================ */ /* ── UTILIDADES RESPONSIVE ── */ @media (max-width: 480px) { .hide-mobile-sm { display: none !important; } } @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (max-width: 1024px) { .hide-tablet { display: none !important; } } /* ── HEADER RESPONSIVE ── */ @media (max-width: 768px) { .topbar { padding: 12px 16px !important; } .topbar h1, .topbar h2 { font-size: 1.1rem !important; } } /* ── MODALES ── */ @media (max-width: 768px) { .modal-content, .modal-box { width: 95% !important; max-width: none !important; margin: 16px !important; padding: 20px !important; } } /* ── FORMULARIOS ── */ @media (max-width: 768px) { .form-row, .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4 { grid-template-columns: 1fr !important; } } /* ── TABLAS ── */ @media (max-width: 768px) { .table-wrapper, .overflow-x-auto { -webkit-overflow-scrolling: touch; } table { min-width: 600px; font-size: 0.85rem !important; } table th, table td { padding: 8px !important; white-space: nowrap; } } /* ── BOTONES ── */ @media (max-width: 768px) { .btn-group, .flex.gap-2, .flex.gap-3, .flex.gap-4 { flex-direction: column !important; } .btn, button { width: 100% !important; } } /* ── GRÁFICAS ── */ @media (max-width: 768px) { canvas { max-height: 250px !important; } } /* ── DASHBOARD ESPECÍFICO ── */ @media (max-width: 768px) { .dash-main-grid, .dashboard-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .stat-card, .metric-card { min-width: auto !important; } } /* ── PLAN CARDS ── */ @media (max-width: 768px) { .plan-card-v2 { margin-bottom: 16px; } .profile-hero { flex-direction: column; text-align: center; padding: 20px; } } /* ── FIX CRÍTICO: TARJETAS KPI ALTURA MÓVIL ── */ @media (max-width: 768px) { /* Tarjetas KPI: Altura mínima y padding adecuado */ .dashboard-kpi-grid > div { min-height: 145px !important; padding: 24px 20px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* Espaciado interno mejorado */ .dashboard-kpi-grid > div > div[style*="display:flex"] { margin-bottom: 16px !important; } /* Número principal más grande y legible */ .dashboard-kpi-grid > div > div[id^="stat-"] { font-size: 2.2rem !important; margin-bottom: 12px !important; line-height: 1 !important; } /* Subtítulo con buen espacio */ .dashboard-kpi-grid .kpi-sub { font-size: 0.82rem !important; margin-top: 8px !important; } /* Espaciado entre tarjetas */ .dashboard-kpi-grid { gap: 16px !important; margin-bottom: 24px !important; } } /* MÓVIL PEQUEÑO: Altura aún mayor */ @media (max-width: 480px) { .dashboard-kpi-grid > div { min-height: 160px !important; padding: 28px 22px !important; } .dashboard-kpi-grid > div > div[id^="stat-"] { font-size: 2.4rem !important; } .dashboard-kpi-grid { gap: 18px !important; } } /* ── AJUSTES MÓVIL PEQUEÑO ── */ @media (max-width: 480px) { h2 { font-size: 1.2rem !important; } h3 { font-size: 1rem !important; } .module-content { padding: 12px !important; } section, .section { margin-bottom: 20px !important; } .quick-actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } }
Todos los módulos

Dashboard

🔔 Notificaciones

Sin notificaciones nuevas

¡Buenos días! 👋

Aquí está el resumen de tu óptica hoy

Ventas Hoy
$0
0 transacciones
Ingresos del Mes
$0
vs mes anterior
Citas Hoy
0
pendientes
Órdenes Pendientes
0
para entregar hoy

Acciones Rápidas

Actividad del Día

Ventas hoy
0
$0.00
Citas hoy
0
programadas
Órdenes pendientes
0
en proceso
Entregas hoy
0
órdenes listas

Actividad Reciente

Sin actividad reciente

Ventas del Mes

Más Vendidos

Alertas

¡Todo en orden!

Venta Rápida por Categoría

Clientes Frecuentes

Sin datos aún

Resumen del Negocio

💰
Ingresos Hoy
$0
en efectivo/tarjeta
📅
Ingresos Mes
$0
este mes
🎯
Ticket Promedio
$0
por venta
📦
Total Ventas
0
este mes

Historial de Actividad

Fecha/Hora Actividad Cliente Monto Estado Acciones
No hay actividad reciente

Punto de Venta

Cliente para esta venta

Opcional — Si no seleccionas cliente se registra como Público General

Productos

Carrito de Compra

Sin productos

Subtotal: $0.00
IVA (16%): $0.00
Total: $0.00

Expedientes de Pacientes

ID Nombre Teléfono Email Última Visita Acciones
No hay pacientes registrados

Examen Visual

Fecha Paciente Optometrista Diagnóstico Acciones
No hay exámenes registrados

Especialistas / Optometristas

Registro de médicos, optometristas y especialistas visuales

# Nombre Completo Tipo / Especialidad Matrícula Cédula SEP Teléfono Estado Acciones
No hay especialistas registrados

Multi-Sucursal

Gestiona todas las sucursales de tu óptica desde un solo lugar

TOTAL SUCURSALES
0
ACTIVAS
0
INACTIVAS
0
SUCURSAL PRINCIPAL
# Nombre / Sucursal Dirección Ciudad / Estado Encargado Teléfono Tipo Estado Acciones
No hay sucursales registradas

Inventario de Productos

Código Producto Categoría Stock Precio Estado Acciones
No hay productos registrados

Órdenes de Trabajo

No. Orden Fecha Cliente Tipo Lente Estado Entrega Acciones
No hay órdenes registradas

Cotizaciones

No. Cotización Fecha Cliente Total Vigencia Estado Acciones
No hay cotizaciones registradas

Compras y Proveedores

Proveedores

Nombre RFC Teléfono Acciones
No hay proveedores

Últimas Compras

Fecha Proveedor Total Acciones
No hay compras

Control Financiero

Ingresos del Mes

$0.00

0 transacciones

Egresos del Mes

$0.00

0 gastos

Utilidad Neta

$0.00

Margen: 0%

Flujo de Efectivo

Facturación Electrónica (CFDI)

Folio Fecha RFC Cliente Total UUID Estado Acciones
No hay facturas emitidas

Reportes y Análisis

Marketing y Promociones

📢 Nueva Campaña de Marketing

0 caracteres 0 palabras

💡 Las variables se reemplazarán automáticamente por los datos de cada cliente

Total de Destinatarios

0

Costo Estimado

$0.00

📊 Campañas Recientes

No hay campañas enviadas aún

Usuarios y Seguridad

Usuario Nombre Rol Email Estado Acciones
admin Administrador Administrador [email protected] Activo

Agenda de Citas

Todas las Citas

Fecha Hora Cliente Tipo Estado Notas Acciones
No hay citas agendadas

Control de Garantías

No. Venta Fecha Venta Cliente Producto Motivo Vigencia Estado Acciones
No hay garantías registradas

🧠 Tu Asesor Inteligente de Negocios

🎯 ACCIÓN PRIORITARIA AHORA

📋 TU PLAN DE ACCIÓN PARA HOY -

💰 COMPRA ESTO (Con números exactos)

🚫 NO COMPRES ESTO (Te explico por qué)

🎁 PROMOCIONES: Qué hacer y cuándo

⏰ Mejor HORARIO para hacer promociones

📅 Mejor FECHA para lanzar campaña

💵 ANÁLISIS FINANCIERO: Inversión vs Retorno

💡 RECOMENDACIONES (con el POR QUÉ explicado)

⭐ TUS PRODUCTOS ESTRELLA

⚠️ PRODUCTOS PROBLEMA

🔮 PREDICCIONES Y ALERTAS

🔍 OCR Avanzado - Lee Letra Manuscrita (Google Vision)

Cargar Documento

✅ Google Cloud Vision - 1000 Docs GRATIS/Mes

Lee letra manuscrita con 85-90% de precisión. Perfecto para recetas escritas a mano. Ordena automáticamente por fecha.

📸 Tipos de Documentos Soportados:

  • • ✅ Recetas manuscritas (letra a mano)
  • • ✅ Tickets de venta
  • • ✅ Facturas (CFDI y tradicionales)
  • • ✅ Cotizaciones / Presupuestos
  • • ✅ Órdenes de trabajo
  • • ✅ Imágenes de WhatsApp
  • • ✅ PDFs escaneados

El sistema intentará detectar el cliente automáticamente

Información Extraída

Esperando documento...

Carga una imagen para iniciar el análisis inteligente

📋 Historial de Digitalizaciones

Fecha Tipo Detectado Cliente Confianza Estado Acciones
No hay documentos digitalizados
-->

Configuración del Sistema

Datos de la Empresa

Información Fiscal (SAT)

Información Bancaria

Información Profesional

Aparece en recibos y documentos

Cédula profesional del optometrista

Políticas Comerciales

Días de validez de las cotizaciones

Porcentaje mínimo de anticipo

Tiempo promedio de entrega

Días de garantía en productos

Términos y Condiciones

OCR Avanzado - Google Cloud Vision

✅ Google Cloud Vision - Lo Mejor para Manuscrita

Lee letra manuscrita con precisión del 85-90%. Perfecto para recetas médicas escritas a mano.

✅ 1000 documentos GRATIS cada mes • Después: $1.50 USD por 1000 más

📌 Obtén tu API Key en: console.cloud.google.com

📋 Pasos para obtener API Key (5 minutos):

  1. 1. Ve a https://console.cloud.google.com/
  2. 2. Crea un proyecto nuevo (ejemplo: "OPTIVRA OCR")
  3. 3. Ve a "APIs y Servicios" → "Biblioteca"
  4. 4. Busca "Cloud Vision API" y haz click en "Habilitar"
  5. 5. Ve a "Credenciales" → "Crear credenciales" → "Clave de API"
  6. 6. Copia la clave (empieza con "AIzaSy...")
  7. 7. Pégala arriba y guarda

💰 Costo:

• Primeros 1000 docs/mes: GRATIS
• Después: $1.50 USD por cada 1000 documentos
• Ejemplo: 50 recetas al mes = $0 USD

-->

Óptica OPTIVRA

San Luis Potosí, México
Plan Profesional

Mi Cuenta

A
Administrador
Contraseña
Última actualización: hace 30 días
Cerrar sesión

Perfil de Empresa

Formas de Pago

💵 Efectivo
💳 Tarjeta débito
💳 Tarjeta crédito
📱 Transferencia SPEI
📲 CoDi / Wallet
📋 Crédito / Abonos

Equipo de Trabajo

Notificaciones

Órdenes listas
Alerta cuando una orden esté lista
Citas próximas
Recordatorio 1 hora antes
Stock bajo
Cuando un producto baje del mínimo
Órdenes retrasadas
Garantías por vencer

Mi Plan

Plan Actual
Plan Profesional
Activo · 7 días de prueba

Ayuda y Soporte

📧 Escribir a soporte
💬 WhatsApp soporte
Lun-Vie 9am-6pm
📲 Compartir OPTIVRA
Recomienda a otros ópticos
OPTIVRA v8.0

Elige tu Plan

Todos incluyen 7 días de prueba gratis

🔵
Básico
$499/mes
  • POS Ventas
  • Expedientes
  • Inventario
  • Órdenes
  • Agenda
  • 2 Usuarios
👑
Empresarial
$1,499/mes
  • Todo Profesional
  • IA Análisis
  • Facturación SAT
  • Ilimitado
  • Soporte 24/7
  • 20GB

Caja y Cortes

Fondo Inicial
$0.00
Ventas del Día
$0.00
Total en Caja
$0.00

Desglose por Método de Pago

Efectivo$0.00
Tarjeta$0.00
Transferencia$0.00
TOTAL$0.00

Resumen del Día

Ventas realizadas0
Ticket promedio$0.00
Apartados cobrados$0.00
Gastos / Retiros$0.00

Movimientos del Día

HoraTipoConceptoMétodoMonto
Sin movimientos hoy

Laboratorio Propio

0
🚨 URGENTES
0
⏳ PENDIENTES
0
⚙️ EN PROCESO
0
✅ LISTAS HOY

Cola de Órdenes

#FolioPacienteTipoGraduaciónPrioridadEstadoFecha EntregaAcciones
Sin órdenes

Inventario del Laboratorio

ProductoCategoríaStockMín.Estado
Sin items