/* * GZStack — Cotizaciones Module Styles * ===================================== * Coherente con la estética dark del sitio principal. * Usa las mismas fuentes (Inter + Sora) y paleta de colores. */ /* ========== FONTS ========== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/sora-latin-var.woff2') format('woff2'); } /* ========== RESET & VARIABLES ========== */ :root { color-scheme: dark; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Sora', system-ui, sans-serif; --bg-base: #0b1220; --bg-surface: #111827; --bg-card: #1e293b; --bg-card-hover: #253449; --bg-input: #0f172a; --brand: #14468c; --brand-light: #2f6fb8; --brand-dark: #0b2447; --accent: #00c2ff; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --purple: #a78bfa; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; --border: #1e293b; --border-light: #334155; --border-accent: rgba(0, 194, 255, 0.3); --glass-bg: rgba(20, 70, 140, 0.12); --glass-border: rgba(255, 255, 255, 0.08); --navbar-bg: rgba(11, 18, 32, 0.85); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 10px 30px rgba(0,0,0,0.5); --shadow-glow: 0 0 30px rgba(0, 194, 255, 0.15); --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== MODO CLARO ========== * Se activa vía atributo data-theme="light" en , aplicado por * theme.js ANTES del primer paint (mismo patrón "zero-flash" que ya usa * para el color de acento del tenant) — nunca depender solo de * prefers-color-scheme, el usuario debe poder forzarlo manualmente * independiente de la config del sistema operativo. * Solo se sobrescriben las variables base — el resto del CSS (1200+ * líneas) las usa casi sin excepción, así que hereda el modo claro gratis. * --accent/--brand/--success/--warning/--danger se dejan igual: son * colores de marca/estado con contraste suficiente en ambos fondos. */ :root[data-theme="light"] { color-scheme: light; --bg-base: #f1f5f9; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-input: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-inverse: #ffffff; --border: #e2e8f0; --border-light: #cbd5e1; --glass-bg: rgba(20, 70, 140, 0.06); --glass-border: rgba(15, 23, 42, 0.08); --navbar-bg: rgba(255, 255, 255, 0.85); --shadow-sm: 0 1px 3px rgba(15,23,42,0.08); --shadow-md: 0 4px 12px rgba(15,23,42,0.10); --shadow-lg: 0 10px 30px rgba(15,23,42,0.14); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Modo embed: página cargada dentro del modal del dashboard — oculta sidebar y topbar para mostrar solo el formulario. */ .gz-embed .gz-sidebar { display: none !important; } .gz-embed .gz-topbar { display: none !important; } .gz-embed .gz-main { margin-left: 0 !important; } .gz-embed .gz-content { padding: 16px 20px 24px; } .gz-embed .gz-page { padding-top: 16px !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; touch-action: manipulation; } /* ========== BACKGROUND PATTERN ========== */ .gz-bg-pattern { background-image: radial-gradient(rgba(0,194,255,0.06) 1px, transparent 1px); background-size: 28px 28px; } /* ========== ANIMATIONS ========== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(0, 194, 255, 0); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes spin { to { transform: rotate(360deg); } } .animate-in { animation: fadeInUp 0.5s ease-out both; } .animate-in-delay-1 { animation-delay: 0.1s; } .animate-in-delay-2 { animation-delay: 0.2s; } .animate-in-delay-3 { animation-delay: 0.3s; } /* ========== LAYOUT ========== */ .gz-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .gz-container-sm { max-width: 560px; margin: 0 auto; padding: 0 24px; } .gz-container-md { max-width: 800px; margin: 0 auto; padding: 0 24px; } /* ========== NAVBAR ========== */ .gz-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 24px; min-height: 64px; height: auto; display: flex; align-items: center; background: var(--navbar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .gz-navbar-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; } .gz-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--text-primary); flex-shrink: 0; } .gz-logo img { width: 32px; height: 32px; } .gz-logo span { color: var(--accent); } .gz-nav-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .gz-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; background: transparent; border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); cursor: pointer; white-space: nowrap; } .gz-nav-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .gz-nav-link.active { color: #ffffff; background: linear-gradient(135deg, rgba(0, 194, 255, 0.25) 0%, rgba(20, 70, 140, 0.4) 100%); border-color: var(--accent); box-shadow: 0 0 14px rgba(0, 194, 255, 0.35); font-weight: 700; } /* ========== NAVBAR: MENÚ "MÁS" ========== */ .gz-nav-dropdown { position: relative; display: inline-block; } .gz-nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; background: var(--bg-surface); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); padding: 8px; z-index: 200; animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .gz-nav-dropdown-menu.open { display: block; } .gz-nav-dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-nav-dropdown-menu a:hover { background: rgba(0, 194, 255, 0.12); color: var(--accent); transform: translateX(4px); } /* Estilos especiales para el Popover de Comprobantes (Replicando diseño de referencia) */ .doc-options-menu { min-width: 240px !important; padding: 10px !important; border-radius: 12px !important; } .doc-menu-icons-bar { display: flex; align-items: center; justify-content: space-around; padding: 6px 4px 10px; } .doc-menu-icon-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 38px; border-radius: 8px; font-size: 1.2rem; background: var(--bg-input); border: 1px solid var(--border-light); transition: color 0.2s ease, background 0.2s ease; padding: 0 !important; } .doc-menu-icon-btn:hover { background: rgba(0, 194, 255, 0.2) !important; border-color: var(--accent, #00c2ff) !important; transform: translateY(-2px) !important; } .doc-menu-divider { height: 1px; background: var(--border-light); margin: 6px 0; } .doc-menu-items-list a { padding: 10px 12px !important; font-size: 0.88rem !important; color: var(--text-primary) !important; } /* ========== APP SHELL: SIDEBAR + TOPBAR (Dashboard SPA) ========== * Reemplaza el gz-navbar horizontal solo en dashboard.html — el resto de * páginas (nueva-venta, nueva-emision, etc.) siguen usando .gz-navbar/ * .gz-page tal cual, no se tocan. Objetivo: el contenido ocupa todo el * ancho disponible en vez de quedar centrado en 1200px. */ .gz-shell { display: flex; min-height: 100vh; align-items: stretch; } .gz-sidebar { width: 234px; flex-shrink: 0; background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; z-index: 100; } .gz-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 18px 18px; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border); flex-shrink: 0; } .gz-sidebar-logo img { width: 28px; height: 28px; flex-shrink: 0; } .gz-sidebar-logo span { color: var(--accent); } .gz-sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .gz-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 0.86rem; font-weight: 600; transition: var(--transition); border-left: 3px solid transparent; white-space: nowrap; } .gz-sidebar-link:hover { background: var(--bg-card-hover); color: var(--text-primary); } .gz-sidebar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .gz-sidebar-link.active { background: var(--glass-bg); color: var(--accent); border-left-color: var(--accent); } .gz-sidebar-icon { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; } /* ── FAVORITOS (sidebar) ── */ .gz-fav-section { display: block; padding: 4px 12px 10px; border-bottom: 1px dashed var(--border-light); margin-bottom: 8px; } .gz-fav-title { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 4px 12px 6px; opacity: 0.85; } .gz-fav-link { font-size: 0.8rem; padding: 6px 10px; } .gz-fav-link:hover { background: var(--bg-card-hover); color: var(--text-primary); } .gz-fav-row { display: flex; align-items: center; border-radius: var(--radius-md); overflow: hidden; } .gz-fav-row.dragging { opacity: 0.4; } .gz-fav-drag { cursor: grab; color: var(--text-muted); padding: 6px 4px 6px 6px; font-size: 1rem; line-height: 1; flex-shrink: 0; user-select: none; opacity: 0; transition: opacity 0.2s; } .gz-fav-row:hover .gz-fav-drag { opacity: 0.6; } .gz-fav-drag:hover { opacity: 1 !important; color: var(--accent); } .gz-fav-row .gz-fav-link { flex: 1; min-width: 0; } /* Estrellita de favorito en cada ítem del sidebar */ .gz-fav-star { margin-left: auto; color: var(--text-muted); font-size: 0.95rem; cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, transform 0.2s; flex-shrink: 0; padding: 0 2px; background: none; border: none; line-height: 1; } .gz-sidebar-link:hover .gz-fav-star { opacity: 0.6; } .gz-fav-star:hover { opacity: 1 !important; transform: scale(1.2); } .gz-fav-star.active { opacity: 1; color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.6); } .gz-sidebar-link.active .gz-fav-star { color: var(--accent); } .gz-sidebar-link.active .gz-fav-star.active { color: #fbbf24; } /* ── Grupos expandibles del sidebar ── */ .gz-sidebar-group { margin-bottom: 2px; } .gz-sidebar-group-toggle { width: 100%; cursor: pointer; background: none; border: none; font-family: inherit; text-align: left; } .gz-sidebar-group-toggle .gz-sidebar-chevron { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); transition: transform 0.25s ease; } .gz-sidebar-group.expanded .gz-sidebar-group-toggle .gz-sidebar-chevron { transform: rotate(90deg); } .gz-sidebar-group-toggle.active .gz-sidebar-chevron { color: var(--accent); } .gz-sidebar-submenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; padding-left: 12px; border-left: 1px dashed var(--border-light); margin-left: 16px; } .gz-sidebar-group.expanded .gz-sidebar-submenu { max-height: 320px; opacity: 1; } .gz-sidebar-sub { font-size: 0.8rem; font-weight: 500; padding: 7px 10px; gap: 10px; border-left: none; } .gz-sidebar-sub .gz-sidebar-icon { font-size: 0.95rem; width: 18px; } /* Breadcrumb sticky en la topbar */ .gz-breadcrumb { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0; } .gz-sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .gz-sidebar-user { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; } .gz-sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; } button.gz-sidebar-toggle { display: none; } .gz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gz-topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; background: var(--navbar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); min-height: 60px; } .gz-topbar .gz-breadcrumb { margin-right: auto; } .gz-topbar-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .gz-topbar-tab { padding: 8px 14px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: var(--transition); white-space: nowrap; } .gz-topbar-tab:hover { color: var(--text-primary); background: var(--bg-card-hover); } .gz-topbar-tab.active { color: var(--text-primary); background: var(--bg-card); box-shadow: var(--shadow-sm); } .gz-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .gz-content { flex: 1; width: 100%; padding: 16px 20px 40px; } /* Aprovechamiento de espacio Full Width en tablas y dashboards */ .gz-table-wrap { width: 100%; max-width: 100%; } @media (max-width: 900px) { .gz-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-lg); } .gz-sidebar.open { transform: translateX(0); } button.gz-sidebar-toggle { display: inline-flex; } .gz-topbar { padding: 10px 14px; } .gz-content { padding: 16px 14px 50px; } } @media print { .gz-sidebar, .gz-topbar { display: none !important; } } /* ========== CARDS / GLASS PANELS ========== */ .gz-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-md); } .gz-glass { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } /* ========== BUTTONS ========== */ .gz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; text-decoration: none; border: none; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); white-space: nowrap; line-height: 1.4; } .gz-btn:active { transform: scale(0.97); } .gz-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .gz-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(20, 70, 140, 0.4); } .gz-btn-primary:hover { background: var(--brand-light); box-shadow: 0 4px 16px rgba(20, 70, 140, 0.5); transform: translateY(-1px); } .gz-btn-accent { background: var(--accent); color: var(--text-inverse); } .gz-btn-accent:hover { background: #33d1ff; transform: translateY(-1px); } .gz-btn-success { background: var(--success); color: #fff; } .gz-btn-success:hover { background: #16a34a; } .gz-btn-danger, .gz-btn-cancel { background: #ef4444; color: #ffffff; border: 1px solid #dc2626; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35); } .gz-btn-danger:hover, .gz-btn-cancel:hover { background: #dc2626; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5); } .gz-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); } .gz-btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--accent); } .gz-btn-sm { padding: 5px 12px; font-size: 0.78rem; } .gz-btn-lg { padding: 12px 24px; font-size: 0.95rem; border-radius: var(--radius-lg); } .gz-btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-md); } /* ========== FORM ELEMENTS ========== */ /* margin-bottom acá es la corrección de mayor alcance de todo este pase de diseño: sin ella, cada formulario dependía de un style="margin-bottom:..." inline puesto a mano, de forma inconsistente, campo por campo — muchos modales terminaban con los campos apilados sin ningún espacio entre sí. Al vivir en la clase base, cada formulario de la app (Compras, Ventas, Configuración, todos) gana ritmo vertical consistente de una sola vez. */ .gz-input-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .gz-input-group:last-child { margin-bottom: 0; } .gz-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .gz-input, .gz-textarea, .gz-select { width: 100%; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-light); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); outline: none; } .gz-input:focus, .gz-textarea:focus, .gz-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.15); } .gz-input::placeholder, .gz-textarea::placeholder { color: var(--text-muted); } .gz-textarea { resize: vertical; min-height: 80px; } .gz-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } .gz-checkbox-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; } .gz-checkbox-wrap input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* ========== KPI STATS ========== */ .gz-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; } .gz-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: flex; align-items: center; gap: 12px; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-stat-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .gz-stat-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .gz-stat-value { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; font-variant-numeric: tabular-nums; } .gz-stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; } /* ========== TABLES ========== */ .gz-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; } .gz-table-wrap::-webkit-scrollbar { height: 8px; } .gz-table-wrap::-webkit-scrollbar-track { background: transparent; } .gz-table-wrap::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); } .gz-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .gz-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; } .gz-table th { background: var(--bg-card); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .gz-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; } .gz-table tbody tr { transition: background var(--transition); } .gz-table tbody tr:hover { background: rgba(30, 41, 59, 0.5); } .gz-table tbody tr:last-child td { border-bottom: none; } .gz-table .text-right { text-align: right; } .gz-table .text-center { text-align: center; } /* ========== BADGES / STATUS ========== */ .gz-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .gz-badge-vigente, .badge.b-vigente { background: rgba(34, 197, 94, 0.12); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.25); } .gz-badge-aceptada, .gz-badge-pagada, .badge.b-pagada { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.35); } .gz-badge-pendiente, .badge.b-pendiente { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); } .gz-badge-rechazada, .gz-badge-anulada, .badge.b-anulada { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); } .gz-badge-vencida, .badge.b-vencida { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-full, 9999px); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } /* Modificadores genéricos (no atados a un estado de documento específico) */ .gz-badge-success { background: rgba(34, 197, 94, 0.12); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.25); } .gz-badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.25); } .gz-badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.25); } .gz-badge-info { background: rgba(0, 194, 255, 0.12); color: var(--accent); border: 1px solid rgba(0, 194, 255, 0.25); } .gz-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ========== CODE BADGE ========== */ .gz-code-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--bg-input); border: 1px dashed var(--border-light); border-radius: var(--radius-md); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-code-badge:hover { background: rgba(0, 194, 255, 0.08); border-color: var(--accent); } .gz-code-badge .copy-icon { opacity: 0.5; transition: opacity var(--transition); } .gz-code-badge:hover .copy-icon { opacity: 1; } /* ========== TOAST NOTIFICATIONS ========== */ .gz-toast-container { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 10px; } .gz-toast { padding: 14px 20px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: slideDown 0.3s ease-out; box-shadow: var(--shadow-lg); min-width: 280px; max-width: 420px; } .gz-toast-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); } .gz-toast-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); } .gz-toast-info { background: rgba(0, 194, 255, 0.15); border: 1px solid rgba(0, 194, 255, 0.3); color: var(--accent); } /* ========== LOGIN PAGE ========== */ .gz-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .gz-login-card { width: 100%; max-width: 420px; padding: 40px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg), var(--shadow-glow); animation: fadeInUp 0.5s ease-out; } .gz-login-header { text-align: center; margin-bottom: 32px; } .gz-login-header h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-top: 16px; } .gz-login-header p { color: var(--text-muted); font-size: 0.9rem; margin-top: 6px; } .gz-login-form { display: flex; flex-direction: column; gap: 18px; } .gz-login-error { padding: 12px 16px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--radius-md); color: var(--danger); font-size: 0.85rem; display: none; animation: slideDown 0.3s ease; } /* ========== DASHBOARD ========== */ .gz-page { padding-top: 72px; padding-bottom: 24px; min-height: 100vh; } .gz-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .gz-page-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--text-primary); } .gz-page-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* Search & Filters */ .gz-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } .gz-search-box { flex: 1; min-width: 240px; position: relative; } .gz-search-box .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .gz-search-box input { padding-left: 42px; } .gz-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .gz-filter-pill { padding: 7px 16px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-filter-pill:hover { border-color: var(--accent); color: var(--accent); } .gz-filter-pill.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); } /* ========== QUOTATION BUILDER COMPACT ========== */ .gz-builder-layout-compact { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; } .gz-builder-form-compact { min-width: 0; } .gz-preview-compact { position: sticky; top: 76px; } .gz-compact-card { padding: 12px 14px; margin-bottom: 0; } .gz-builder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .gz-builder-form { position: sticky; top: 76px; } .gz-builder-section { margin-bottom: 14px; } .gz-builder-section-title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; } .gz-item-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; position: relative; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); animation: fadeInUp 0.3s ease-out; } .gz-item-row:hover { border-color: var(--border-light); } .gz-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .gz-item-number { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--accent); background: rgba(0, 194, 255, 0.1); padding: 3px 10px; border-radius: var(--radius-full); } .gz-item-fields { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end; } .gz-item-total { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; text-align: right; padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 8px; } .gz-remove-item { width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(239, 68, 68, 0.1); border: none; color: var(--danger); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-remove-item:hover { background: var(--danger); color: #fff; } /* ========== CONDITION TAGS ========== */ .gz-condition-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; animation: fadeIn 0.2s ease-out; } .gz-condition-item input { flex: 1; } /* ========== TOTALS PANEL ========== */ .gz-totals { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-top: 20px; } .gz-totals-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; } .gz-totals-row.subtotal { color: var(--text-secondary); } .gz-totals-row.igv { color: var(--text-muted); border-bottom: 1px dashed var(--border); padding-bottom: 12px; margin-bottom: 4px; } .gz-totals-row.total { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--accent); padding-top: 12px; } /* ========== PREVIEW DOCUMENT (IMPRESIONANTE & PREMIUM) ========== */ .gz-preview, .gz-document-body { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 36px; box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0, 194, 255, 0.05); } .gz-preview-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 2px solid var(--accent); margin-bottom: 24px; gap: 20px; } .gz-preview-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text-primary); display: flex; flex-direction: column; gap: 6px; } .gz-preview-logo img { max-height: 55px; max-width: 200px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } .gz-preview-logo span { color: var(--accent); } .gz-preview-meta { text-align: right; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; background: rgba(30, 41, 59, 0.4); padding: 14px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); } .gz-preview-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } .gz-preview-number { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--text-primary); margin-bottom: 4px; } .gz-preview-client { background: linear-gradient(135deg, rgba(0, 194, 255, 0.08) 0%, var(--bg-card) 100%); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: 18px 24px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .gz-preview-client-label { font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; } .gz-preview-client-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); } .gz-preview-client-detail { font-size: 0.85rem; color: var(--text-secondary); } /* Preview Table */ .gz-preview-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .gz-preview-table th { background: var(--bg-card); color: var(--accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 14px; text-align: left; border-bottom: 2px solid var(--border); } .gz-preview-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--text-secondary); vertical-align: top; } .gz-preview-table tbody tr:nth-child(even) { background: rgba(30, 41, 59, 0.3); } .gz-preview-table .text-right { text-align: right; } .gz-preview-table .text-center { text-align: center; } .gz-preview-table .item-desc { white-space: pre-line; max-width: 350px; } /* Preview Totals */ .gz-preview-totals { float: right; width: 280px; margin-top: 12px; margin-bottom: 20px; } .gz-preview-totals-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; color: var(--text-secondary); } .gz-preview-totals-row.grand-total { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--accent); border-top: 2px solid var(--accent); padding-top: 12px; margin-top: 4px; } /* Clearfix para evitar solapamientos entre elementos flotantes y notas/adjuntos */ #docTotals::after { content: ""; display: table; clear: both; } #docNotas, #docConditions, #docBankSection, #docAdjuntoSection { clear: both !important; } .gz-preview-conditions h4 { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .gz-preview-conditions ul { padding-left: 20px; font-size: 0.85rem; color: var(--text-muted); } .gz-preview-conditions li { margin-bottom: 6px; } .gz-preview-bank { clear: both; margin-top: 20px; padding: 16px 20px; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); } .gz-preview-bank h4 { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; } .gz-preview-bank p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px; } /* ========== DOCUMENT VIEW PAGE ========== */ .gz-document { max-width: 800px; margin: 0 auto; padding-top: 88px; padding-bottom: 60px; } .gz-document-status { padding: 12px 20px; border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .gz-document-status.vigente { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); color: var(--success); } .gz-document-status.vencida { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: var(--danger); } .gz-document-status.aceptada { background: rgba(0, 194, 255, 0.1); border: 1px solid rgba(0, 194, 255, 0.25); color: var(--accent); } .gz-document-status.rechazada { background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.25); color: var(--text-muted); } .gz-document-body { padding: 40px; } .gz-document-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } /* ========== MODALES POPUP ========== */ .gz-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(10, 15, 29, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9999; display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; padding: 20px; animation: fadeIn 0.25s ease-out; } .gz-modal { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 24px; width: 100%; max-width: 540px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 194, 255, 0.1); animation: fadeInUp 0.3s ease-out; position: relative; max-height: 90vh; overflow-y: auto; } .gz-modal h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; } .gz-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; } /* Variantes de ancho — el .gz-modal base (540px) es correcto para formularios simples, pero se ve apretado en cualquier modal que incluya una tabla de ítems (Orden de Compra, Compra Directa) — ahí un input dentro de una celda angosta es lo que más delata una UI vieja. */ .gz-modal-md { max-width: 640px; } .gz-modal-lg { max-width: 760px; } .gz-modal-xl { max-width: 920px; } /* Encabezado de modal con línea divisoria — separa el título del contenido en vez de que floten juntos, mismo criterio que .gz-page-header pero a escala de modal. Opcional: los modales existentes que solo usan

directo siguen funcionando igual, sin romper nada. */ .gz-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } .gz-modal-head h3 { margin-bottom: 4px; } .gz-modal-head p { color: var(--text-muted); font-size: 0.82rem; margin: 0; } /* Panel anidado dentro de un modal (bloque de ítems, bloque de pago, etc.) — reemplaza el patrón repetido inline "background:var(--bg-input);border-radius:8px;padding:12px" que no tenía borde propio y se perdía visualmente contra el fondo del modal. */ .gz-subcard { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 18px; } .gz-subcard:last-child { margin-bottom: 0; } /* Etiqueta de sección — da jerarquía visual dentro de un modal largo (formulario → ítems → pago) en vez de que todo compita al mismo peso. */ .gz-section-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; } /* Grillas de formulario reutilizables — reemplazan el style="display:grid; grid-template-columns:...; gap:16px" repetido en cada modal con valores ligeramente distintos entre sí. */ .gz-form-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } .gz-form-grid-even-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .gz-form-grid-2, .gz-form-grid-even-2 { grid-template-columns: 1fr; } } /* Tabla de ítems dentro de un modal (builder de OC/Compra Directa/etc.) — celdas más generosas, inputs de la propia tabla sin el borde/fondo duplicado del .gz-input suelto (ya están dentro de una fila con su propio contraste). */ .gz-items-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .gz-items-table th { text-align: left; padding: 8px 10px; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-light); } .gz-items-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .gz-items-table tbody tr:last-child td { border-bottom: none; } .gz-items-table input.gz-input { padding: 7px 10px; font-size: 0.85rem; background: var(--bg-surface); } .gz-items-empty { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 18px 10px; } .gz-items-total-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); font-size: 0.85rem; color: var(--text-secondary); } .gz-items-total-row strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); } /* Buscador con dropdown de resultados flotante — mismo patrón repetido inline (position:relative + absolute) en cada modal con búsqueda de producto/cliente. */ .gz-search-inline { position: relative; display: flex; gap: 8px; margin-bottom: 12px; } .gz-search-inline input { flex: 1; } .gz-search-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); max-height: 220px; overflow-y: auto; z-index: 30; box-shadow: var(--shadow-lg); } /* Barra de iconos de acción en filas de tabla (comprobantes SUNAT ya la usaba; Compras/Proveedores/Almacén tenían solo texto plano) — botones circulares consistentes en toda la app. */ .gz-row-actions { display: flex; align-items: center; gap: 4px; } .gz-row-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); text-decoration: none; } .gz-row-icon-btn:hover { background: var(--bg-card-hover); border-color: var(--border-light); color: var(--text-primary); } .gz-row-icon-btn.danger:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); } .gz-verify-page { padding-top: 100px; padding-bottom: 60px; } .gz-verify-hero { max-width: 480px; margin: 0 auto; text-align: center; } .gz-verify-hero h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; } .gz-verify-hero p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 32px; } .gz-code-input-wrap { display: flex; gap: 12px; justify-content: center; } .gz-code-input { width: 220px; text-align: center; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 16px; border-radius: var(--radius-lg); border: 2px solid var(--border-light); background: var(--bg-surface); color: var(--accent); box-shadow: var(--shadow-sm); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 194, 255, 0.2); outline: none; } /* RESPONSIVE DESIGNS */ @media (max-width: 768px) { .gz-navbar-inner { padding: 0 16px; } .gz-page { padding-top: 76px; } .gz-builder-layout { grid-template-columns: 1fr; } .gz-builder-form { position: static; } .gz-preview, .gz-document-body { padding: 20px; } .gz-preview-header { flex-direction: column; align-items: stretch; } .gz-preview-meta { text-align: left; } .gz-code-input-wrap { flex-direction: column; align-items: center; } .gz-code-input { width: 100%; } } @media (max-width: 480px) { .gz-stats-grid { grid-template-columns: 1fr; } .gz-login-card { padding: 28px 20px; } .gz-preview, .gz-document-body { padding: 16px; } } /* ========== PRINT STYLES (IMPRESIONANTE & EXECUTIVE PDF) ========== */ @media print { @page { size: A4; margin: 8mm 12mm; } :root { --bg-base: #ffffff; --bg-surface: #ffffff; --bg-card: #ffffff; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --border: #cbd5e1; --border-light: #e2e8f0; } body { background: #ffffff !important; color: #0f172a !important; font-size: 9pt; line-height: 1.4; padding: 0; margin: 0; } .gz-navbar, .gz-document-actions, .gz-document-status, .no-print, #docAdjuntoSection { display: none !important; } .gz-document { max-width: 100%; margin: 0; padding: 0 !important; box-shadow: none !important; } .gz-document-body, .gz-preview { background: #ffffff !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Header impreso con Logo e Isotipo de marca */ .gz-preview-logo { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; } .gz-preview-logo img { display: inline-block !important; height: 42px !important; width: 42px !important; object-fit: contain !important; margin: 0 !important; } .gz-preview-logo span { font-size: 1.4rem !important; font-weight: 800 !important; color: #0f172a !important; } .gz-doc-header { border-bottom: 2px solid #0f172a !important; padding-bottom: 12px !important; margin-bottom: 16px !important; } .gz-preview-meta { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-top: 3px solid #0088cc !important; padding: 10px 14px !important; border-radius: 6px !important; box-shadow: none !important; } .gz-preview-title { color: #0088cc !important; font-size: 10pt !important; font-weight: 800 !important; } .gz-preview-number { color: #0f172a !important; font-size: 13pt !important; font-weight: 800 !important; } /* Cliente destacado en PDF */ .gz-preview-client { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; border-left: 5px solid #0088cc !important; padding: 10px 16px !important; margin-bottom: 16px !important; border-radius: 6px !important; box-shadow: none !important; } .gz-preview-client-label { color: #0088cc !important; font-size: 8pt !important; font-weight: 800 !important; text-transform: uppercase !important; } .gz-preview-client-name { color: #0f172a !important; font-size: 11pt !important; font-weight: 800 !important; } /* Tabla ejecutiva de alta legibilidad en PDF */ .gz-preview-table { font-size: 8.5pt !important; border: 1px solid #cbd5e1 !important; margin-bottom: 16px !important; border-radius: 6px !important; overflow: hidden !important; } .gz-preview-table th { background: #0f172a !important; color: #ffffff !important; padding: 8px 10px !important; font-size: 8pt !important; font-weight: 700 !important; text-transform: uppercase !important; border: none !important; } .gz-preview-table td { padding: 8px 10px !important; border-bottom: 1px solid #e2e8f0 !important; color: #1e293b !important; } .gz-preview-table tbody tr:nth-child(even) { background: #f8fafc !important; } /* Desglose de totales en PDF sin solapamientos */ .gz-preview-totals { float: right !important; width: 250px !important; margin-top: 0 !important; margin-bottom: 16px !important; font-size: 9pt !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; padding: 10px 14px !important; border-radius: 6px !important; } .gz-preview-totals-row.grand-total { border-top: 2px solid #0088cc !important; font-size: 11pt !important; font-weight: 800 !important; color: #0088cc !important; padding-top: 6px !important; margin-top: 4px !important; } /* Bloque Datos de Banco y Condiciones en PDF */ .gz-preview-bank, .gz-preview-conditions { clear: both !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-left: 4px solid #0f172a !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: 8pt !important; margin-top: 12px !important; page-break-inside: avoid !important; } .gz-preview-conditions h4, .gz-preview-bank h4 { color: #0f172a !important; font-weight: 800 !important; font-size: 8.5pt !important; margin-bottom: 6px !important; } .gz-verify-page { padding: 0 !important; } } /* ================================================================= GZStack v3 — Skeleton Shimmer + Glass/Neon utilitarias ================================================================= */ /* Skeleton placeholder */ .gz-skeleton { background: linear-gradient(90deg, rgba(148,163,184,0.08) 25%, rgba(148,163,184,0.15) 50%, rgba(148,163,184,0.08) 75%); background-size: 200% 100%; animation: gzShimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); min-height: 16px; } .gz-skeleton-text { height: 14px; width: 80%; margin-bottom: 8px; } .gz-skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; } .gz-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; } .gz-skeleton-row { display:flex; gap:12px; align-items:center; padding:10px 0; } @keyframes gzShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Glass card mejorada (backdrop-filter + gradient border on hover) */ .gz-glass-card { background: var(--bg-card); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); position: relative; overflow: hidden; } .gz-glass-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--accent), #7c3aed, #f472b6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .gz-glass-card:hover { border-color: var(--border-accent); box-shadow: 0 0 24px rgba(0,194,255,0.15), var(--shadow-md); transform: translateY(-2px); } .gz-glass-card:hover::before { opacity: 0.5; } /* Botón con glow neón */ .gz-btn-neon { background: linear-gradient(135deg, var(--accent), #7c3aed); border: none; color: #fff; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 0 16px rgba(0,194,255,0.12); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .gz-btn-neon:hover { box-shadow: 0 0 28px rgba(0,194,255,0.35), 0 0 60px rgba(124,58,237,0.15); transform: translateY(-1px); } .gz-btn-neon:active { transform: scale(0.97); } /* Badge con glow */ .gz-badge-glow { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.73rem; font-weight: 600; background: rgba(0,194,255,0.08); border: 1px solid rgba(0,194,255,0.2); box-shadow: 0 0 10px rgba(0,194,255,0.08); } /* Indicador de pulso (descargas, notificaciones) */ .gz-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: gzPulse 2s ease-in-out infinite; } @keyframes gzPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } /* Debounce visual en inputs de búsqueda (transición sutil) */ .gz-search-input-transition { transition: border-color 0.2s ease, box-shadow 0.2s ease; } .gz-search-input-transition:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,194,255,0.12); } /* Campo con error de validación (rojo + glow sutil) */ .gz-input-error, input.gz-input-error, select.gz-input-error, textarea.gz-input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important; animation: gzShake 0.4s ease; } @keyframes gzShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* Botón en estado de descarga (pulso) */ .gz-downloading { position: relative; pointer-events: none; animation: gzDownloadPulse 0.8s ease-out; } .gz-downloading::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; animation: gzDownloadRipple 0.8s ease-out; } @keyframes gzDownloadPulse { 0% { transform: scale(1); } 30% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes gzDownloadRipple { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* Barra de progreso de carga global (estilo NProgress) */ .gz-loading-bar { position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), #7c3aed); box-shadow: 0 0 10px var(--accent); transition: width 0.3s ease; pointer-events: none; } /* ============================================================ SISTEMA DE DISEÑO — SaaS B2B (ver docs/UX_DESIGN.md) ============================================================ */ /* ── Tipografía: jerarquía estricta ── */ :root { --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace; } html { font-size: 14px; } /* base interfaz */ .gz-label { font-size: 12px; } /* etiquetas secundarias */ .gz-page-subtitle { font-size: 0.82rem; color: var(--text-muted); } /* Montos e IDs de documento: negrita + tabular + (IDs) monospace */ .gz-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .gz-num-id { font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; } .gz-money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } /* ── Botones: estados evidentes ── */ .gz-btn { transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform 0.08s ease, opacity var(--transition); } .gz-btn:hover { filter: brightness(1.05); } .gz-btn:active { transform: scale(0.98); } .gz-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; } .gz-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .gz-btn-primary { background: var(--accent); color: #04121f; font-weight: 600; border: none; } .gz-btn-danger { background: var(--danger); color: #fff; } button, [role="button"] { cursor: pointer; } /* ── Tabla de datos compacta y legible ── */ .gz-table th, .gz-table td { padding: 8px 10px; font-size: 0.82rem; line-height: 1.4; } .gz-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; } .gz-table td.num, .gz-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .gz-table tbody tr:hover { background: var(--bg-card-hover, rgba(0,194,255,0.04)); } /* ── Badges semánticos (estados de factura) ── */ .gz-badge { font-weight: 600; font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .gz-badge-success { background: rgba(34,197,94,0.14); color: var(--success); border: 1px solid rgba(34,197,94,0.35); } .gz-badge-danger { background: rgba(239,68,68,0.14); color: var(--danger); border: 1px solid rgba(239,68,68,0.35); } .gz-badge-warning { background: rgba(245,158,11,0.14); color: var(--warning); border: 1px solid rgba(245,158,11,0.35); } .gz-badge-info { background: rgba(0,194,255,0.12); color: var(--accent); border: 1px solid rgba(0,194,255,0.3); } .gz-badge-muted { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); } /* ── Breadcrumbs (migas de pan) ── */ .gz-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } .gz-breadcrumb .gz-crumb { color: var(--text-muted); } .gz-breadcrumb .gz-crumb a { color: var(--text-muted); text-decoration: none; } .gz-breadcrumb .gz-crumb a:hover { color: var(--accent); } .gz-breadcrumb .gz-crumb.current { color: var(--text-primary); font-weight: 600; } .gz-breadcrumb .gz-sep { color: var(--border-light); } /* ── Filtros sticky + colapsables ── */ .gz-filters-bar { position: sticky; top: 60px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; background: var(--bg-surface, var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius-lg); } .gz-filters-bar .gz-filters-toggle { flex-shrink: 0; } .gz-filters-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; } .gz-filters-body.collapsed { display: none; } /* ── Sidepanel (offcanvas) para detalle sin salir del módulo ── */ .gz-sidepanel-overlay { position: fixed; inset: 0; background: rgba(4,12,25,0.55); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .gz-sidepanel-overlay.open { opacity: 1; pointer-events: auto; } .gz-sidepanel { position: fixed; top: 0; right: 0; height: 100%; width: 560px; max-width: 94vw; background: var(--bg-surface, var(--bg-card)); border-left: 1px solid var(--border); z-index: 1001; transform: translateX(100%); transition: transform 0.24s ease; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0,0,0,0.3); } .gz-sidepanel.open { transform: translateX(0); } .gz-sidepanel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .gz-sidepanel-body { flex: 1; overflow-y: auto; padding: 16px; } .gz-sidepanel-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; } /* ── Acciones de tarjeta/formulario alineadas a la derecha ── */ .gz-card-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } .gz-card-actions .gz-btn-danger { margin-left: auto; }