/** * Dark Theme CSS Variables Override * Aplicable cuando data-theme="dark" está presente en */ :root[data-theme="dark"] { /* Colores principales */ --primary-color: #4db6ac; --primary-dark: #00897b; --primary-light: #80cbc4; --secondary-color: #ff8a65; --background-color: #333333; --background-secondary: #424242; --background-tertiary: #505050; --text-color: #f5f5f5; --text-secondary: #e0e0e0; --text-tertiary: #bdbdbd; --border-color: #616161; --border-light: #757575; --success-color: #4caf50; --warning-color: #ff9800; --error-color: #f44336; --info-color: #2196f3; /* Colores específicos para etiquetas y seguridad */ --danger-signal-bg: #8b0000; --danger-signal-text: #ffffff; --warning-signal-bg: #b8860b; --warning-signal-text: #000000; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.7); /* Estilos de riesgo en tema oscuro */ --risk-alto-bg: #3a0a0a; --risk-alto-border: #ff4444; --risk-alto-text: #ff7777; --risk-medio-bg: #3a2a0a; --risk-medio-border: #ffaa44; --risk-medio-text: #ffbb77; --risk-bajo-bg: #0a3a0a; --risk-bajo-border: #44ff44; --risk-bajo-text: #77ff77; } /* Estilos generales para tema oscuro */ html[data-theme="dark"] body { background-color: var(--background-color); color: var(--text-color); } html[data-theme="dark"] #app { background-color: var(--background-color); color: var(--text-color); } /* Pantalla */ html[data-theme="dark"] .screen { background-color: var(--background-color); color: var(--text-color); } /* Botones */ html[data-theme="dark"] button { background-color: var(--primary-color); color: white; border: none; } html[data-theme="dark"] button:hover { background-color: var(--primary-light); } html[data-theme="dark"] button:active { background-color: var(--primary-dark); } /* Inputs y formularios */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--background-secondary); color: var(--text-color); border: 1px solid var(--border-color); } html[data-theme="dark"] input[type="text"]::placeholder, html[data-theme="dark"] input[type="search"]::placeholder { color: var(--text-tertiary); } /* Cards de productos */ html[data-theme="dark"] .product-card { background-color: var(--background-secondary); border: 1px solid var(--border-color); color: var(--text-color); } html[data-theme="dark"] .product-card:hover { background-color: var(--background-tertiary); box-shadow: var(--shadow-md); } /* Secciones de seguridad */ html[data-theme="dark"] .safety-section { background-color: var(--background-secondary); border-left: 4px solid var(--primary-color); color: var(--text-color); } html[data-theme="dark"] .safety-section h3 { color: var(--primary-light); } /* Niveles de riesgo */ html[data-theme="dark"] .risk-alto { background-color: var(--risk-alto-bg); border: 1px solid var(--risk-alto-border); color: var(--risk-alto-text); } html[data-theme="dark"] .risk-medio { background-color: var(--risk-medio-bg); border: 1px solid var(--risk-medio-border); color: var(--risk-medio-text); } html[data-theme="dark"] .risk-bajo { background-color: var(--risk-bajo-bg); border: 1px solid var(--risk-bajo-border); color: var(--risk-bajo-text); } /* Etiqueta (Label) */ html[data-theme="dark"] .label-container { background-color: var(--background-secondary); border: 1px solid var(--border-color); } html[data-theme="dark"] .label-hazards-box { background-color: #1a1a1a; border: 2px solid var(--border-light); } html[data-theme="dark"] .label-precautions { background-color: #0a2a0a; color: #77ff77; } /* Modal */ html[data-theme="dark"] .modal { background-color: var(--background-secondary); color: var(--text-color); border: 1px solid var(--border-color); } html[data-theme="dark"] .modal-overlay { background-color: rgba(0, 0, 0, 0.7); } /* Notificaciones */ html[data-theme="dark"] .notification { background-color: var(--background-secondary); color: var(--text-color); border-left: 4px solid var(--primary-color); } html[data-theme="dark"] .notification.success { border-left-color: var(--success-color); } html[data-theme="dark"] .notification.error { border-left-color: var(--error-color); } html[data-theme="dark"] .notification.warning { border-left-color: var(--warning-color); } /* Header y Footer */ html[data-theme="dark"] #app-header { background-color: var(--background-secondary); border-bottom: 1px solid var(--border-color); color: var(--text-color); } html[data-theme="dark"] #app-footer { background-color: var(--background-secondary); border-top: 1px solid var(--border-color); color: var(--text-secondary); } /* Scroll to top button */ html[data-theme="dark"] .scroll-to-top { background-color: var(--primary-color); color: #ffffff; } /* Navegación de secciones */ html[data-theme="dark"] .safety-nav { background-color: var(--background-secondary); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.3); } html[data-theme="dark"] .safety-nav-btn { background-color: var(--background-tertiary); border-color: var(--border-color); color: var(--text-color); } html[data-theme="dark"] .safety-nav-btn:hover { background-color: var(--primary-color); color: #ffffff; } html[data-theme="dark"] .safety-nav-btn.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #ffffff; } /* Search box in nav */ html[data-theme="dark"] .content-search-box input { background-color: var(--background-tertiary); border-color: var(--border-color); color: var(--text-color); } html[data-theme="dark"] .scroll-to-top:hover { background-color: var(--primary-light); } /* Breadcrumbs */ html[data-theme="dark"] .breadcrumbs { color: var(--text-secondary); } html[data-theme="dark"] .breadcrumbs a { color: var(--primary-light); text-decoration: none; } html[data-theme="dark"] .breadcrumbs a:hover { text-decoration: underline; } /* Tabla de contenidos */ html[data-theme="dark"] .table-of-contents { background-color: var(--background-secondary); border: 1px solid var(--border-color); } html[data-theme="dark"] .table-of-contents ul { list-style: none; } html[data-theme="dark"] .table-of-contents a { color: var(--primary-light); text-decoration: none; } html[data-theme="dark"] .table-of-contents a:hover { text-decoration: underline; } /* Loading indicator */ html[data-theme="dark"] .loading-indicator { color: var(--primary-light); } /* Toggle theme button */ body[data-theme="dark"] .theme-toggle { background-color: var(--background-secondary); color: var(--primary-light); border: 1px solid var(--border-color); } body[data-theme="dark"] .theme-toggle:hover { background-color: var(--background-tertiary); } /* Scrollbar personalizada */ body[data-theme="dark"]::-webkit-scrollbar { width: 10px; } body[data-theme="dark"]::-webkit-scrollbar-track { background: var(--background-color); } body[data-theme="dark"]::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 5px; } body[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }