/* Add here all your CSS customizations */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap'); /* Variables de Tema Globales alineadas con Megacamion React */ :root { --bg-app: #f3f4f6; --bg-card: #ffffff; --border-color: #e5e7eb; --text-main: #1f2937; --text-muted: #6b7280; --primary-color: #16a34a; --primary-hover: #15803d; --primary-light: #dcfce7; --primary-text: #ffffff; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --border-radius: 8px; } /* Modo Oscuro nativo a través de la clase .dark en */ html.dark { --bg-app: #111827; --bg-card: #1f2937; --border-color: #374151; --text-main: #f9fafb; --text-muted: #9ca3af; --primary-color: #4ade80; --primary-hover: #22c55e; --primary-light: #14532d; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } /* Tipografía Outfit Global */ body, html, p, span, a, h1, h2, h3, h4, h5, h6, input, select, textarea, button, td, th { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; } /* Fondos y Wrapper Principal */ body { background-color: var(--bg-app) !important; color: var(--text-main) !important; } .inner-wrapper { background-color: var(--bg-app) !important; } /* Encabezados y Título de Páginas */ .page-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; border-left: 1px solid var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } .page-header h2 { color: var(--text-main) !important; border-bottom: none !important; } /* Paneles / Tarjetas (Cards) */ .panel, section.panel { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; box-shadow: var(--shadow-sm) !important; margin-bottom: 20px !important; overflow: hidden !important; } .panel-heading { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; padding: 15px 20px !important; } .panel-title { color: var(--text-main) !important; font-size: 18px !important; font-weight: 600 !important; } .panel-body { background: var(--bg-card) !important; color: var(--text-main) !important; padding: 20px !important; border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } /* Tablas Modernas */ .table { color: var(--text-main) !important; background-color: var(--bg-card) !important; border-collapse: separate !important; border-spacing: 0 !important; } .table th, .table td { border-top: 1px solid var(--border-color) !important; padding: 12px 15px !important; vertical-align: middle !important; } .table thead th { background-color: var(--bg-app) !important; color: var(--text-main) !important; border-bottom: 2px solid var(--border-color) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 0.05em !important; } .table-bordered { border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.015) !important; } html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.015) !important; } .table-hover tbody tr:hover { background-color: rgba(22, 163, 74, 0.05) !important; } /* Botones Principales y Éxito de Color Verde Megacamion */ .btn-primary, .btn-success { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--primary-text) !important; border-radius: 6px !important; font-weight: 500 !important; transition: all 0.2s ease-in-out !important; box-shadow: 0 2px 4px 0 rgba(22, 163, 74, 0.2) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: var(--primary-text) !important; box-shadow: 0 4px 6px 0 rgba(22, 163, 74, 0.3) !important; } .btn-default { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; border-radius: 6px !important; transition: all 0.2s ease-in-out !important; } .btn-default:hover { background-color: var(--bg-app) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } /* Formularios y Inputs Modernos */ .form-control { background-color: var(--bg-card) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; padding: 8px 12px !important; height: auto !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; } .form-control:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25) !important; outline: none !important; } .form-control[disabled], .form-control[readonly] { background-color: var(--bg-app) !important; opacity: 0.7 !important; cursor: not-allowed !important; } /* Cabecera superior (Header) */ .header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } .header .logo-container { background: var(--bg-card) !important; border-right: 1px solid var(--border-color) !important; } /* Barra de Navegación Lateral (Sidebar Left) */ .sidebar-left { background: var(--bg-card) !important; border-right: 1px solid var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } .sidebar-left .sidebar-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; } .sidebar-left .sidebar-title { color: var(--text-main) !important; } /* Elementos del menú */ .nav-main li a { color: var(--text-muted) !important; transition: all 0.2s ease !important; border-radius: 6px !important; margin: 2px 8px !important; } .nav-main li a:hover { background: var(--bg-app) !important; color: var(--primary-color) !important; } .nav-main li.nav-active > a { background: var(--primary-light) !important; color: var(--primary-color) !important; font-weight: 600 !important; } .nav-main li.nav-parent > a:after { color: var(--text-muted) !important; } .nav-main .nav-children { background: transparent !important; } /* Botón de Alternancia de Tema en la Cabecera */ #theme-toggle-btn { color: var(--text-main) !important; transition: transform 0.3s ease !important; } #theme-toggle-btn:hover { transform: rotate(20deg) scale(1.1) !important; color: var(--primary-color) !important; }