/* --- NUEVO DISEÑO: "RM2 Impresiones" - Profesional y Colorido - Usa Variables CSS (Custom Properties) para temas - Animaciones sutiles y efectos de hover - Paleta de colores de marca para tarjetas de estadísticas --- */ /* --- 1. Importación de Fuente Limpia --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); /* --- 2. Variables CSS (Tema Claro por defecto) --- */ :root { /* Paleta de Colores de Marca */ --color-primary: #0d6efd; --color-primary-rgb: 13, 110, 253; --color-success: #198754; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #0dcaf0; /* Paleta del Tema (Modo Claro) */ --color-bg: #f4f7f6; /* Fondo principal (gris muy claro) */ --color-surface: #ffffff; /* Fondo de tarjetas, navbar, footer */ --color-text: #222222; /* Texto principal (más suave que el negro) */ --color-text-muted: #6c757d; /* Texto secundario */ --color-border: #e0e0e0; /* Bordes de tarjetas, tablas, inputs */ --color-footer-bg: #ffffff; /* Sistema de Diseño */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --border-radius-sm: 0.375rem; /* 6px */ --border-radius-md: 0.5rem; /* 8px */ --shadow-sm: 0 2px 4px rgba(0,0,0, 0.04); --shadow-md: 0 5px 15px rgba(0,0,0, 0.08); --shadow-lg: 0 10px 30px rgba(0,0,0, 0.1); --transition-speed: 0.25s ease; } /* --- 3. Variables del Modo Oscuro --- */ /* Tu script de layout.js añade .dark-mode a */ html.dark-mode { --color-bg: #121212; --color-surface: #1e1e1e; --color-text: #f0f0f0; --color-text-muted: #888888; --color-border: #333333; --color-footer-bg: #1e1e1e; } /* --- 4. Animaciones --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --- 5. Estilos Base --- */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } body { font-family: var(--font-family-base); background-color: var(--color-bg); color: var(--color-text); transition: background-color var(--transition-speed), color var(--transition-speed); } /* Aplica la animación de entrada a la sección de contenido principal */ main[role="main"] { animation: fadeInUp 0.4s ease backwards; } /* --- 6. Navbar Mejorada --- */ .navbar-modern { background: var(--color-surface); box-shadow: var(--shadow-md); transition: all var(--transition-speed); } .navbar-brand { font-weight: 700; font-size: 1.25rem; } .nav-link { font-weight: 500; color: var(--color-text-muted); position: relative; padding-top: 0.5rem; padding-bottom: 0.5rem; transition: color var(--transition-speed); } .nav-link:hover { color: var(--color-primary); } /* Animación de línea para el enlace activo */ .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--color-primary); transition: width var(--transition-speed); } .nav-link.active { color: var(--color-primary) !important; font-weight: 700; } .nav-link.active::after { width: 100%; /* Dibuja la línea solo si está activo */ } /* --- 7. Botones Mejorados --- */ .btn { border-radius: var(--border-radius-sm); font-weight: 500; padding: 0.6rem 1.25rem; transition: all var(--transition-speed); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* --- 8. Tarjetas (Cards) --- */ .card { background-color: var(--color-surface); border: 0; /* Usamos sombras, no bordes */ border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); transition: all var(--transition-speed); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-header, .card-footer { background-color: transparent; border-color: var(--color-border); } /* --- 9. Tarjetas de Estadísticas (Para tu Dashboard) --- */ /* Esto le dará el "colorido" a tu página de inicio */ .card-stat { text-align: center; padding: 1.5rem; border-radius: var(--border-radius-md); color: #fff; transition: all var(--transition-speed); box-shadow: var(--shadow-md); } .card-stat:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); } .card-stat .stat-icon { font-size: 2.5rem; opacity: 0.8; } .card-stat .stat-number { font-size: 2.75rem; font-weight: 700; margin: 0.5rem 0; } .card-stat .stat-title { font-size: 1rem; opacity: 0.9; } /* Colores para las tarjetas (puedes usarlas en tu Home) */ .card-stat-success { background: var(--color-success); } .card-stat-warning { background: var(--color-warning); } .card-stat-primary { background: var(--color-primary); } .card-stat-danger { background: var(--color-danger); } .card-stat-info { background: var(--color-info); } /* --- 10. Formularios --- */ .form-control, .form-select { border-radius: var(--border-radius-sm); background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); transition: all var(--transition-speed); } .form-control:focus, .form-select:focus { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); /* Sombra de foco colorizada */ box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1); } html.dark-mode .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f0f0f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .input-group-text { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); } /* --- 11. Footer --- */ .footer { background-color: var(--color-footer-bg); color: var(--color-text-muted); padding-top: 1.5rem; /* Más espacio */ padding-bottom: 1.5rem; border-top: 1px solid var(--color-border); transition: all var(--transition-speed); } /* --- 12. Toggle Modo Oscuro --- */ .mode-toggle-icon { font-size: 1.2rem; cursor: pointer; } /* --- Estilos para la página Home (Index.cshtml) --- */ /* Estilo para la sección "Hero" de bienvenida */ .hero-section { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 3rem 1.5rem; margin-bottom: -1px; } /* Estilos para la Agenda Semanal (tipo Monday.com) */ .task-board { background-color: var(--color-surface); border-radius: var(--border-radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; position: relative; } .task-row { display: flex; flex-wrap: wrap; padding: 1rem; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: background-color var(--transition-speed); } .task-list a.task-row:hover { background-color: var(--color-bg); cursor: pointer; } .task-row:last-child { border-bottom: 0; } .task-header { color: var(--color-text-muted); font-weight: 500; font-size: 0.9rem; text-transform: uppercase; background-color: var(--color-bg); } .task-col { display: flex; align-items: center; padding: 0 0.5rem; } .task-col .badge { padding: 0.5em 0.75em; font-size: 0.85rem; } /* Diseño para Escritorio */ @media (min-width: 768px) { .task-col[data-label] { padding-left: 5px; } .task-col[data-label]::before { content: ""; display: none; } .task-col:nth-child(1) { width: 30%; } /* Pedido */ .task-col:nth-child(2) { width: 15%; } /* Sede */ .task-col:nth-child(3) { width: 20%; } /* Empleado */ .task-col:nth-child(4) { width: 15%; } /* Estado */ .task-col:nth-child(5) { width: 20%; } /* Fecha Entrega */ } /* Diseño para Móvil */ @media (max-width: 767.98px) { .task-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .task-col { width: 100% !important; padding: 2px 0; } .task-col[data-label]::before { content: attr(data-label) " "; font-weight: 500; color: var(--color-text-muted); min-width: 90px; display: inline-block; } } /* --- Colores de Monday.com --- */ /* Títulos */ .agenda-title-this-week { color: #007bff; } .agenda-title-next-week { color: #6f42c1; } /* Listas con barra lateral */ .task-list .task-row { position: relative; padding-left: 1.5rem; /* Espacio para la barra de color */ } .task-list .task-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; transition: all var(--transition-speed); } .task-list-this-week .task-row::before { background-color: #007bff; } .task-list-next-week .task-row::before { background-color: #6f42c1; } /* Efecto hover en la barra */ .task-list-this-week a.task-row:hover::before { background-color: #0056b3; } .task-list-next-week a.task-row:hover::before { background-color: #4e2f8d; } /* Ajuste de cabecera para alinear con la barra */ .task-header { padding-left: 1.5rem; } /* --- Estilos personalizados para Tarjetas de Pedido (Fondo, tipo de letra y separación) --- */ /* 2. Versión para Modo Oscuro (si lo vuelves a activar) */ html.dark-mode .card-body .card-title { background-color: #343a40; /* Fondo gris oscuro */ } /* 3. La "pequeña separación" que pediste */ /* Esto añade un margen superior SÓLO al primer subtítulo (el de Cliente) */ .card-body .card-subtitle:first-of-type { margin-top: 1rem; /* 1rem = 16px de separación */ } /* Estilos adicionales para que las tarjetas se vean mejor en 4 columnas */ .card-body .display-5 { /* Iconos más pequeños para pantallas grandes */ font-size: 2.5rem !important; /* display-5 es 3rem, lo bajamos */ } .card-body .card-title.fw-bold { /* Títulos de tarjeta más pequeños */ font-size: 1.15rem !important; /* h5 es 1.25rem, lo bajamos */ } .card-body .card-text.small { /* Texto descriptivo más pequeño */ font-size: 0.85rem !important; margin-bottom: 0.75rem !important; /* Espacio para el botón */ } .card-body .btn-sm { /* Botones más pequeños */ padding: 0.3rem 0.75rem !important; font-size: 0.8rem !important; } /* Estilos adicionales para que las tarjetas se vean mejor en 4 columnas */ .card-body .display-5 { /* Iconos más pequeños para pantallas grandes */ font-size: 2.5rem !important; /* display-5 es 3rem, lo bajamos */ } .card-body .card-title.fw-bold { /* Títulos de tarjeta más pequeños */ font-size: 1.15rem !important; /* h5 es 1.25rem, lo bajamos */ } .card-body .card-text.small { /* Texto descriptivo más pequeño */ font-size: 0.85rem !important; margin-bottom: 0.75rem !important; /* Espacio para el botón */ } .card-body .btn-sm { /* Botones más pequeños */ padding: 0.3rem 0.75rem !important; font-size: 0.8rem !important; }