/* ============================================================ RUBUS GESTIÓN — Design System "DocuForge" (adaptado) Limpio, profesional, con tema claro/oscuro conmutable vía [data-theme] en . DocuForge es nativamente claro; la variante oscura fue extrapolada manteniendo la misma paleta de marca (azul/púrpura) y tipografía. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); :root { /* Radios */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --radius: var(--radius-md); /* Espaciado base 8px */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; /* Tipografia */ --font-headline: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'Fira Code', monospace; /* Marca (constante en ambos temas) */ --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-primary-soft: #EFF6FF; --color-secondary: #7C3AED; --color-secondary-soft: #F5F3FF; --color-success: #16A34A; --color-success-soft: #F0FDF4; --color-warning: #CA8A04; --color-warning-soft: #FFF7ED; --color-error: #DC2626; --color-error-soft: #FEF2F2; --color-info: #2563EB; /* Alias de compatibilidad constante */ --azul: #2563EB; /* Sombras (recalculadas por tema mas abajo via variables) */ --shadow-subtle: 0 1px 2px rgba(0,0,0,.04); --shadow-medium: 0 4px 12px rgba(0,0,0,.06); --shadow-large: 0 12px 32px rgba(0,0,0,.10); } html[data-theme="light"] { --color-bg: #FAFAFA; --color-surface: #FFFFFF; --color-surface-alt: #F4F4F5; --color-border: #E4E4E7; --color-border-strong: #D4D4D8; --color-text: #18181B; --color-text-muted: #6B7280; --color-text-faint: #A1A1AA; --color-input-bg: #FFFFFF; --color-table-header-bg: #FAFAFA; --color-row-hover: #F4F4F5; --sidebar-bg: #FFFFFF; --sidebar-border: #E4E4E7; --sidebar-text: #3F3F46; --sidebar-text-muted: #9CA3AF; --sidebar-hover-bg: #F4F4F5; --sidebar-active-bg: #EFF6FF; --shadow-subtle: 0 1px 2px rgba(0,0,0,.04); --shadow-medium: 0 4px 12px rgba(0,0,0,.06); --shadow-large: 0 12px 32px rgba(0,0,0,.10); /* Alias reactivos */ --borde: var(--color-border); --gris-100: var(--color-surface-alt); --gris-400: var(--color-text-muted); --gris-600: var(--color-text-muted); } html[data-theme="dark"] { --color-bg: #0B0D12; --color-surface: #15171D; --color-surface-alt: #1C1F26; --color-border: #262A33; --color-border-strong: #33383F; --color-text: #F4F4F5; --color-text-muted: #9CA3AF; --color-text-faint: #71717A; --color-input-bg: #15171D; --color-table-header-bg: #1C1F26; --color-row-hover: #1A1D24; --sidebar-bg: #101217; --sidebar-border: #21242B; --sidebar-text: #D4D4D8; --sidebar-text-muted: #71717A; --sidebar-hover-bg: #1C1F26; --sidebar-active-bg: #1E2A47; --shadow-subtle: 0 1px 2px rgba(0,0,0,.35); --shadow-medium: 0 4px 14px rgba(0,0,0,.45); --shadow-large: 0 16px 40px rgba(0,0,0,.55); /* Alias reactivos */ --borde: var(--color-border); --gris-100: var(--color-surface-alt); --gris-400: var(--color-text-muted); --gris-600: var(--color-text-muted); } * { box-sizing: border-box; } html, body { margin: 0; background: var(--color-bg); color: var(--color-text); } body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; transition: background-color .15s ease, color .15s ease; } a { text-decoration: none; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-headline); font-weight: 700; letter-spacing: .01em; margin: 0 0 var(--space-2); color: var(--color-text); } h1 { font-size: 26px; line-height: 1.25; } h2 { font-size: 21px; line-height: 1.3; } h3 { font-size: 17px; line-height: 1.35; font-weight: 600; } p { line-height: 1.7; } /* ---------- LOGIN ---------- */ .pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--color-bg); } .caja-login { background: var(--color-surface); padding: var(--space-5); border-radius: var(--radius-lg); width: 360px; border: 1px solid var(--color-border); box-shadow: var(--shadow-large); } .caja-login h1 { margin: 0 0 4px; font-size: 22px; text-align: center; } .subtitulo { color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-4); font-size: 13px; } .caja-login label { display: block; margin: var(--space-3) 0 6px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); font-family: var(--font-body); } .caja-login input { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; background: var(--color-input-bg); color: var(--color-text); font-family: var(--font-body); } .caja-login input:focus { outline: none; border: 2px solid var(--color-primary); padding: 9px 13px; } .btn-ancho { width: 100%; margin-top: var(--space-3); } .logo-login { max-width: 140px; max-height: 80px; display: block; margin: 0 auto var(--space-2); } /* ---------- LAYOUT ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 264px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: var(--space-3) 0; flex-shrink: 0; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--sidebar-border); } .sidebar-logo { font-family: var(--font-headline); font-size: 17px; font-weight: 700; padding: 0 var(--space-3) var(--space-3); color: var(--color-text); } .sidebar-logo img, .topbar-logo img { height: 26px; width: auto; vertical-align: middle; border-radius: var(--radius-sm); } .sidebar-logo span, .topbar-logo span { vertical-align: middle; margin-left: 8px; } .sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 0 var(--space-2); } .sidebar nav a { padding: 10px 12px; color: var(--sidebar-text-muted); font-size: 13.5px; font-weight: 500; border-left: 2px solid transparent; border-radius: var(--radius-sm); margin: 0 -8px; padding-left: 20px; } .sidebar nav a:hover { background: var(--sidebar-hover-bg); color: var(--color-text); } .sidebar nav a.activo { background: var(--sidebar-active-bg); color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; } .sidebar-usuario { padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--sidebar-border); margin-top: var(--space-2); font-size: 13px; } .sidebar-usuario > div:first-child { font-weight: 600; } .sidebar-usuario small { color: var(--sidebar-text-muted); } .link-salir { display: block; margin-top: var(--space-2); color: var(--color-error); font-size: 12.5px; } .contenido { flex: 1; padding: var(--space-5); max-width: 1280px; } /* ---------- CONMUTADOR DE TEMA ---------- */ .theme-toggle { display: flex; align-items: center; gap: 2px; margin-top: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; cursor: pointer; width: fit-content; } .theme-toggle button { border: none; background: transparent; color: var(--sidebar-text-muted); font-size: 12.5px; padding: 5px 12px; border-radius: var(--radius-full); cursor: pointer; font-family: var(--font-body); } .theme-toggle button.activo { background: var(--color-primary); color: #fff; } /* ---------- COMPONENTES ---------- */ .encabezado-pagina { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-3); } .encabezado-pagina h1 { display: flex; align-items: center; gap: 8px; } .tarjeta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-subtle); transition: box-shadow .15s ease; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .card-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-subtle); transition: box-shadow .15s ease; } .card-kpi:hover { box-shadow: var(--shadow-medium); } .card-kpi .valor { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 700; margin: 4px 0; } .card-kpi .etiqueta { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-variant-numeric: tabular-nums; } table th, table td { padding: 11px var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; font-size: 13.5px; } table th { background: var(--color-table-header-bg); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; } table tr:hover td { background: var(--color-row-hover); } .tabla-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .tabla-wrap table { border: none; } table input[type="text"], table input[type="number"], table select { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-input-bg); color: var(--color-text); font-family: var(--font-body); font-size: 13px; width: 100%; min-width: 70px; } table input:focus, table select:focus { outline: none; border: 2px solid var(--color-primary); padding: 5px 9px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); font-size: 14px; height: 38px; cursor: pointer; font-weight: 500; font-family: var(--font-body); transition: all .15s ease; } .btn:hover { background: var(--color-surface-alt); color: var(--color-text); } .btn-primario { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primario:hover { background: var(--color-primary-hover); } .btn-peligro { background: var(--color-error); color: #fff; border-color: var(--color-error); } .btn-peligro:hover { background: #B91C1C; } .btn-exito { background: var(--color-success); color: #fff; border-color: var(--color-success); } .btn-exito:hover { background: #15803D; } .btn-sm { padding: 7px 13px; font-size: 12.5px; height: 32px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); } .form-grid.col-1 { grid-template-columns: 1fr; } .form-grid.col-3 { grid-template-columns: repeat(3, 1fr); } .campo { display: flex; flex-direction: column; } .campo label { font-size: 13px; font-weight: 500; color: var(--color-text-muted); margin-bottom: 6px; } .campo input, .campo select, .campo textarea { padding: 9px 13px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-body); background: var(--color-input-bg); color: var(--color-text); height: 38px; } .campo textarea { resize: vertical; min-height: 70px; height: auto; line-height: 1.6; } .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--color-border-strong); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border: 2px solid var(--color-primary); padding: 8px 12px; } .campo input[type="checkbox"], .campo input[type="radio"] { width: auto; height: auto; accent-color: var(--color-primary); } input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); } .acciones-form { margin-top: var(--space-4); display: flex; gap: var(--space-2); } .alerta { padding: 12px var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: 13.5px; border: 1px solid transparent; line-height: 1.6; } .alerta-error { background: var(--color-error-soft); color: #991B1B; border-color: #FECACA; } .alerta-exito { background: var(--color-success-soft); color: #166534; border-color: #BBF7D0; } .alerta-info { background: var(--color-primary-soft); color: #1E40AF; border-color: #BFDBFE; } html[data-theme="dark"] .alerta-error { color: #FCA5A5; border-color: #7F1D1D; background: rgba(220,38,38,.12); } html[data-theme="dark"] .alerta-exito { color: #86EFAC; border-color: #14532D; background: rgba(22,163,74,.12); } html[data-theme="dark"] .alerta-info { color: #93C5FD; border-color: #1E3A5F; background: rgba(37,99,235,.12); } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; font-family: var(--font-body); } .badge-gris { background: var(--color-surface-alt); color: var(--color-text-muted); } .badge-azul { background: var(--color-primary-soft); color: var(--color-primary); } .badge-verde { background: var(--color-success-soft); color: var(--color-success); } .badge-rojo { background: var(--color-error-soft); color: var(--color-error); } .badge-naranja { background: var(--color-warning-soft); color: var(--color-warning); } html[data-theme="dark"] .badge-azul { background: rgba(37,99,235,.15); color: #60A5FA; } html[data-theme="dark"] .badge-verde { background: rgba(22,163,74,.15); color: #4ADE80; } html[data-theme="dark"] .badge-rojo { background: rgba(220,38,38,.15); color: #F87171; } html[data-theme="dark"] .badge-naranja { background: rgba(202,138,4,.15); color: #FBBF24; } .acciones-tabla { display: flex; gap: 6px; } .buscador { padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; min-width: 240px; background: var(--color-input-bg); color: var(--color-text); height: 38px; font-family: var(--font-body); } .buscador:focus { outline: none; border: 2px solid var(--color-primary); padding: 8px 13px; } .vacio { text-align: center; padding: var(--space-5) var(--space-3); color: var(--color-text-muted); } .texto-derecha { text-align: right; } .stock-bajo { color: var(--color-error); font-weight: 700; } /* ---------- TOPBAR MOVIL ---------- */ .topbar-movil { display: none; align-items: center; gap: var(--space-3); background: var(--sidebar-bg); color: var(--color-text); padding: 12px var(--space-3); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--sidebar-border); } .btn-hamburguesa { background: none; border: none; color: var(--color-text); font-size: 20px; cursor: pointer; padding: 4px 8px; } .topbar-logo { font-family: var(--font-headline); font-size: 15px; font-weight: 700; display: flex; align-items: center; } .overlay-menu { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 45; } .overlay-menu.activo { display: block; } /* ---------- ACCESOS RAPIDOS ---------- */ .accesos-rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .acceso-rapido { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); color: var(--color-text); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-subtle); transition: box-shadow .15s ease; font-family: var(--font-body); } .acceso-rapido:hover { box-shadow: var(--shadow-medium); } .acceso-rapido .icono { font-size: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-primary-soft); flex-shrink: 0; } .acceso-rapido small { display: block; font-weight: 400; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; } .acceso-rapido.ot { border-left-color: var(--color-primary); } .acceso-rapido.ot .icono { background: var(--color-primary-soft); } .acceso-rapido.cotizacion { border-left-color: var(--color-secondary); } .acceso-rapido.cotizacion .icono { background: var(--color-secondary-soft); } .acceso-rapido.cliente { border-left-color: var(--color-success); } .acceso-rapido.cliente .icono { background: var(--color-success-soft); } /* ---------- GRAFICOS ---------- */ .grafico-caja { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-subtle); } .grafico-caja h3 { margin-top: 0; } .grafico-contenedor { position: relative; height: 280px; } .grid-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 900px) { .grid-graficos { grid-template-columns: 1fr; } } /* ---------- RESPONSIVE MOVIL ---------- */ @media (max-width: 860px) { .topbar-movil { display: flex; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-large); } .sidebar.abierto { transform: translateX(0); } .layout { flex-direction: column; } .contenido { padding: var(--space-3); max-width: 100%; } .form-grid, .form-grid.col-3 { grid-template-columns: 1fr; } .grid-cards { grid-template-columns: repeat(2, 1fr); } .encabezado-pagina { flex-direction: column; align-items: stretch; } .encabezado-pagina h1 { font-size: 18px; } table th, table td { padding: 8px 6px; font-size: 12px; } .acciones-tabla { flex-direction: column; } .accesos-rapidos { grid-template-columns: 1fr; } .buscador { width: 100%; min-width: 0; } } @media (max-width: 480px) { .grid-cards { grid-template-columns: 1fr; } } /* ---------- KPIS con variacion ---------- */ .card-kpi .variacion { font-size: 11.5px; margin-top: 4px; font-family: var(--font-body); } .card-kpi .variacion.positiva { color: var(--color-success); } .card-kpi .variacion.negativa { color: var(--color-error); } /* ---------- Tablas de reportes ---------- */ .filtros-reporte { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-3); } .filtros-reporte .campo { margin-bottom: 0; } /* ---------- Toggle neto/bruto ---------- */ .chip-neto-bruto { display: inline-flex; gap: 6px; background: var(--color-surface-alt); padding: 4px; border-radius: var(--radius-sm); } .chip-neto-bruto span { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; } .valor-bruto-hint { font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; } code, .code { font-family: var(--font-mono); font-size: 13px; background: var(--color-surface-alt); padding: 2px 6px; border-radius: var(--radius-sm); }