:root { --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s ease; }
* { box-sizing: border-box; }
body { margin: 0; display: flex; height: 100vh; background: var(--bg-main); color: var(--color-text); font-family: var(--font-primary); overflow: hidden; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-heading); margin: 0; }
.text-primary { color: var(--color-primary); } .text-accent { color: var(--color-accent); } .text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text); opacity: 0.6; }
.mt-3 { margin-top: 15px; } .mt-4 { margin-top: 25px; }

::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* --- SIDEBAR --- */
.sidebar-wrapper { padding: 20px; width: 280px; height: 100vh; box-sizing: border-box; display: flex; }
.sidebar { background: var(--bg-sidebar); width: 100%; border-radius: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); overflow: hidden; }
.logo { padding: 30px 25px 20px; display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 40px; height: 40px; background: var(--gradient-primary); border-radius: 12px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px; box-shadow: var(--shadow-sm); }
.logo h2 { font-size: 22px; font-weight: 800; }
.nav-scroll { flex: 1; overflow-y: auto; padding: 10px 20px; }
.nav-label { font-size: 10px; font-weight: 800; color: var(--color-text); opacity: 0.5; letter-spacing: 1.5px; margin: 0 0 10px 10px; }
.nav-menu { display: flex; flex-direction: column; gap: 5px; }
.nav-menu button { display: flex; align-items: center; gap: 15px; width: 100%; padding: 14px 16px; background: transparent; border: none; color: var(--color-text); font-size: 14.5px; font-weight: 600; border-radius: 14px; cursor: pointer; transition: var(--transition-fast); text-align: left; font-family: inherit; }
.nav-menu button i { font-size: 18px; width: 24px; text-align: center; opacity: 0.7; transition: var(--transition-fast); }
.nav-menu button:hover { background: var(--bg-input); color: var(--color-heading); }
.nav-menu button.active { background: var(--gradient-primary); color: white; box-shadow: 0 8px 20px var(--shadow-primary); }
.nav-menu button.active i { opacity: 1; }
.sidebar-footer { padding: 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-main); margin: 10px; border-radius: 16px; }
.user-profile-mini { display: flex; align-items: center; gap: 10px; }
.avatar-mini { width: 36px; height: 36px; background: var(--color-primary); color: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 16px; }
.user-info-mini { display: flex; flex-direction: column; }
.user-info-mini .user-name { font-size: 14px; font-weight: 700; color: var(--color-heading); }
.user-info-mini .user-role { font-size: 11px; color: var(--color-text); opacity: 0.7; }
.btn-logout-icon { background: transparent; border: none; color: #ef4444; font-size: 18px; cursor: pointer; padding: 8px; border-radius: 8px; transition: var(--transition-fast); }
.btn-logout-icon:hover { background: #fee2e2; }

/* --- MAIN & TOPBAR --- */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.topbar { height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.topbar-left { flex: 1; } .topbar-center { flex: 2; display: flex; justify-content: center; } .topbar-actions { flex: 1; display: flex; justify-content: flex-end; gap: 15px; }

/* Buscador (Reemplazado por Caja para evitar scripts del CmdK si falla Hostinger) */
.search-box { background: var(--bg-sidebar); border: 1px solid var(--color-border); padding: 12px 20px; border-radius: 20px; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 450px; box-shadow: var(--shadow-sm); transition: var(--transition-fast); }
.search-box:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.search-box i { color: var(--color-text); opacity: 0.5; }
.search-box input { border: none; background: transparent; width: 100%; outline: none; color: var(--color-heading); font-family: inherit; font-size: 14px; }

.cmd-trigger { background: var(--bg-sidebar); border: 1px solid var(--color-border); padding: 12px 20px; border-radius: 20px; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 450px; cursor: text; transition: var(--transition-fast); color: var(--color-text); box-shadow: var(--shadow-sm); font-family: inherit; font-size: 14px; }
.cmd-trigger:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cmd-trigger span { flex: 1; text-align: left; opacity: 0.6; }
.cmd-trigger kbd { background: var(--bg-main); border: 1px solid var(--color-border); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: monospace; opacity: 0.8; }

.action-btn { width: 45px; height: 45px; border-radius: 14px; background: var(--bg-sidebar); border: 1px solid var(--color-border); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition-fast); color: var(--color-heading); font-size: 18px; box-shadow: var(--shadow-sm); }
.action-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); transform: translateY(-2px); }
.notification-badge { position: relative; }
.notification-badge::after { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-sidebar); }

.view-container { flex: 1; padding: 0 40px 40px; overflow-y: auto; scroll-behavior: smooth; }

/* ================= BENTO GRID (RECUPERADO Y BLINDADO) ================= */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(130px, auto); gap: 20px; }
.bento-card { background: var(--bg-sidebar); border: 1px solid var(--color-border); border-radius: 24px; padding: 25px; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; overflow: hidden;}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }

.span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.row-1 { grid-row: span 1; } .row-2 { grid-row: span 2; } .row-3 { grid-row: span 3; }

.bento-icon { width: 50px; height: 50px; border-radius: 16px; display: flex; justify-content: center; align-items: center; font-size: 22px; margin-bottom: 15px; }
.icon-blue { background: rgba(37,99,235,0.1); color: #2563eb; } .icon-green { background: rgba(16,185,129,0.1); color: #10b981; } .icon-orange { background: rgba(245,158,11,0.1); color: #f59e0b; }
.bento-card h3 { font-size: 32px; margin: 0; font-weight: 800; letter-spacing: -1px; }
.bento-card p { margin: 5px 0 0; opacity: 0.7; font-size: 14px; font-weight: 500; }

.btn-primary { background: var(--gradient-primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-weight: 700; font-family: var(--font-heading); cursor: pointer; transition: var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 15px var(--shadow-primary); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--shadow-primary); opacity: 0.9; }

/* Animación de carga para las vistas (reemplaza al skeleton si falla) */
.fade-in { animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ================= MODALES BLINDADOS (NO USAR DISPLAY: NONE AQUÍ, SE USA EN LINEA EN EL HTML) ================= */
.modal-overlay { /* Estilos cuando está activo (clase manejada por JS) */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-box { background: var(--bg-sidebar); width: 100%; max-width: 500px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 1px solid var(--color-border); overflow: hidden; animation: popIn 0.3s ease; }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { padding: 20px 25px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-main); }
.modal-body { padding: 25px; max-height: 70vh; overflow-y: auto; }
.modal-footer { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }

.form-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--color-text); opacity: 0.8; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--bg-input); color: var(--color-heading); font-family: inherit; font-size: 14px; font-weight: 500; outline: none; box-sizing: border-box; resize: none; transition: 0.2s;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); background: var(--bg-sidebar); }
.btn-secondary { background: var(--bg-input); color: var(--color-text); border: 1px solid var(--color-border); padding: 12px 20px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; font-family: inherit; }
.btn-secondary:hover { background: var(--color-border); }

.icon-btn-close { background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--color-text); opacity: 0.5; transition: 0.2s; }
.icon-btn-close:hover { opacity: 1; color: #ef4444; }

/* --- DRAWER (CONFIGURACIÓN) --- */
.drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: flex-end; }
.drawer-content { width: 350px; background: var(--bg-sidebar); height: 100%; display: flex; flex-direction: column; animation: slideLeft 0.3s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header { padding: 25px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; }
.drawer-body { padding: 25px; overflow-y: auto; flex: 1; }
.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; margin-bottom: 15px; }

/* Grid Colores Drawer */
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.color-option { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; display: flex; justify-content: center; cursor: pointer; transition: 0.2s; }
.color-option:hover { border-color: var(--color-primary); background: var(--bg-input); }
.color-circle { width: 30px; height: 30px; border-radius: 50%; box-shadow: var(--shadow-sm); }

/* Lista Fuentes Drawer */
.font-list { display: flex; flex-direction: column; gap: 10px; }
.font-item { padding: 15px; border: 1px solid var(--color-border); border-radius: 12px; cursor: pointer; transition: 0.2s; font-size: 14px; }
.font-item:hover { border-color: var(--color-primary); background: var(--bg-input); padding-left: 20px; }

/* --- TOASTS --- */
#toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 999999; display: flex; flex-direction: column; gap: 15px; pointer-events: none; }
.toast { background: var(--bg-sidebar); border-left: 4px solid var(--color-primary); color: var(--color-heading); padding: 16px 24px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 15px; font-weight: 600; font-size: 14px; animation: slideInToast 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
@keyframes slideInToast { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-success { border-left-color: #10b981; } .toast-success i { color: #10b981; font-size: 20px; }

/* --- CMD PALETTE --- */
.cmd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); z-index: 9999; justify-content: center; padding-top: 10vh; transition: 0.2s; }
.cmd-modal { background: var(--bg-sidebar); width: 100%; max-width: 600px; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); border: 1px solid var(--color-border); overflow: hidden; animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); max-height: 70vh; display: flex; flex-direction: column;}
@keyframes slideDown { from { transform: translateY(-20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.cmd-input-container { display: flex; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--color-border); }
.cmd-input-container input { flex: 1; border: none; background: transparent; font-size: 18px; color: var(--color-heading); outline: none; margin-left: 15px;}
.cmd-results { padding: 15px; overflow-y: auto; flex: 1; }
.cmd-item { width: 100%; text-align: left; padding: 14px 15px; background: transparent; border: none; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--color-text); cursor: pointer; display: flex; align-items: center; gap: 12px; }
.cmd-item:hover { background: var(--bg-input); color: var(--color-primary); }

/* UTILIDADES TABLAS */
table { width: 100%; border-collapse: collapse; }
th { padding: 15px 20px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; }
td { padding: 15px 20px; font-size: 14px; }

.pos-item-card { border: 1px solid var(--color-border); padding: 20px; border-radius: 16px; text-align: center; background: var(--bg-sidebar); cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pos-item-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pos-icon { width: 50px; height: 50px; background: var(--bg-input); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; margin-bottom: 12px; }
.pos-title { font-size: 13px; font-weight: 700; margin: 0 0 5px 0; color: var(--color-heading); }
.pos-price { font-size: 16px; font-weight: 800; color: var(--color-accent); margin: 0; }