/* 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
Sin notificaciones nuevas
¡Buenos días! 👋
Aquí está el resumen de tu óptica hoy
—
—
Órdenes pendientes
0
en proceso
Entregas hoy
0
órdenes listas
💰
Ingresos Hoy
$0
en efectivo/tarjeta
📅
Ingresos Mes
$0
este mes
🎯
Ticket Promedio
$0
por venta
📦
Total Ventas
0
este mes
| 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
Carrito de Compra
Subtotal:
$0.00
IVA (16%):
$0.00
Total:
$0.00
Examen Visual
| Fecha |
Paciente |
Optometrista |
Diagnóstico |
Acciones |
| No hay exámenes registrados |
Nueva Sucursal
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
| # |
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
Resultado del Reporte
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
📊 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)
🔍 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
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
📋 Pasos para obtener API Key (5 minutos):
- 1. Ve a https://console.cloud.google.com/
- 2. Crea un proyecto nuevo (ejemplo: "OPTIVRA OCR")
- 3. Ve a "APIs y Servicios" → "Biblioteca"
- 4. Busca "Cloud Vision API" y haz click en "Habilitar"
- 5. Ve a "Credenciales" → "Crear credenciales" → "Clave de API"
- 6. Copia la clave (empieza con "AIzaSy...")
- 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
Contraseña
Última actualización: hace 30 días
Perfil de Empresa
Equipo de Trabajo
Mi Plan
Plan Actual
Plan Profesional
Activo · 7 días de prueba
Ayuda y 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
POPULAR
⚡
Profesional
$899/mes
- Todo Básico
- Exámenes Visuales
- Cotizaciones
- Reportes
- Marketing
- 5 Usuarios
👑
Empresarial
$1,499/mes
- Todo Profesional
- IA Análisis
- Facturación SAT
- Ilimitado
- Soporte 24/7
- 20GB
Caja y Cortes
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
| Hora | Tipo | Concepto | Método | Monto |
| Sin movimientos hoy |
Laboratorio Propio
Cola de Órdenes
| # | Folio | Paciente | Tipo | Graduación | Prioridad | Estado | Fecha Entrega | Acciones |
| Sin órdenes |
Inventario del Laboratorio
| Producto | Categoría | Stock | Mín. | Estado |
| Sin items |