/** * FoxPayroll - Sistema de Temas * * Este archivo define las variables CSS para temas personalizables. * Para cambiar el tema del sistema, modifica las variables en :root o * crea una nueva clase de tema (ej: .theme-dark, .theme-custom). * * Uso: Aplica la clase del tema al elemento o * Ejemplo: o */ /* ======================================== TEMA POR DEFECTO (Azul FoxPayroll) ======================================== */ :root, .theme-default { /* Colores Primarios */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; /* Color principal */ --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; /* Colores de Estado */ --color-success: #10b981; /* Verde - Operaciones exitosas */ --color-success-light: #d1fae5; --color-success-dark: #047857; --color-warning: #f59e0b; /* Amarillo - Advertencias */ --color-warning-light: #fef3c7; --color-warning-dark: #d97706; --color-error: #ef4444; /* Rojo - Errores */ --color-error-light: #fee2e2; --color-error-dark: #dc2626; --color-info: #3b82f6; /* Azul - Información */ --color-info-light: #dbeafe; --color-info-dark: #1d4ed8; /* Colores de Acción */ --color-add: #10b981; /* Verde - Agregar */ --color-edit: #3b82f6; /* Azul - Editar */ --color-delete: #ef4444; /* Rojo - Eliminar */ --color-approve: #8b5cf6; /* Púrpura - Aprobar */ /* Colores Neutros */ --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; /* Colores de Fondo */ --bg-body: #f9fafb; /* Fondo principal */ --bg-card: #ffffff; /* Fondo de tarjetas */ --bg-sidebar: #ffffff; /* Fondo del sidebar */ --bg-navbar: #2563eb; /* Fondo del navbar */ --bg-hover: #f3f4f6; /* Hover en elementos */ --bg-active: #dbeafe; /* Estado activo */ /* Colores de Texto */ --text-primary: #111827; /* Texto principal */ --text-secondary: #6b7280; /* Texto secundario */ --text-light: #9ca3af; /* Texto claro */ --text-on-primary: #ffffff; /* Texto sobre color primario */ --text-on-dark: #ffffff; /* Texto sobre fondos oscuros */ /* Bordes */ --border-color: #e5e7eb; --border-radius: 0.5rem; --border-radius-lg: 0.75rem; /* Sombras */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Espaciado */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Tipografía */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; /* Transiciones */ --transition-fast: 150ms ease-in-out; --transition-base: 200ms ease-in-out; --transition-slow: 300ms ease-in-out; } /* ======================================== TEMA OSCURO ======================================== */ .theme-dark { /* Colores Primarios - Ajustados para tema oscuro */ --color-primary-600: #3b82f6; --color-primary-700: #60a5fa; --color-primary-100: #1e3a8a; --color-primary-800: #93c5fd; /* Colores de Estado - Más brillantes para contraste */ --color-success: #34d399; --color-success-light: #064e3b; --color-success-dark: #6ee7b7; --color-warning: #fbbf24; --color-warning-light: #78350f; --color-warning-dark: #fcd34d; --color-error: #f87171; --color-error-light: #7f1d1d; --color-error-dark: #fca5a5; --color-info: #60a5fa; --color-info-light: #1e3a8a; --color-info-dark: #93c5fd; /* Colores de Acción - Más brillantes para Dark Mode */ --color-add: #34d399; --color-edit: #60a5fa; --color-delete: #f87171; --color-approve: #c084fc; /* Colores Neutros Invertidos */ --color-gray-50: #1f2937; --color-gray-100: #374151; --color-gray-200: #4b5563; --color-gray-300: #6b7280; --color-gray-400: #9ca3af; --color-gray-500: #d1d5db; --color-gray-600: #e5e7eb; --color-gray-700: #f3f4f6; --color-gray-800: #f9fafb; --color-gray-900: #ffffff; /* Colores de Fondo */ --bg-body: #111827; --bg-card: #1f2937; --bg-sidebar: #1f2937; --bg-navbar: #1e40af; --bg-hover: #374151; --bg-active: #1e3a8a; /* Colores de Texto */ --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-light: #9ca3af; --text-on-primary: #ffffff; --text-on-dark: #ffffff; /* Bordes */ --border-color: #374151; /* Sombras - Más sutiles en tema oscuro */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ======================================== TEMA VERDE (Alternativo) ======================================== */ .theme-green { --color-primary-50: #f0fdf4; --color-primary-100: #dcfce7; --color-primary-200: #bbf7d0; --color-primary-300: #86efac; --color-primary-400: #4ade80; --color-primary-500: #22c55e; --color-primary-600: #16a34a; --color-primary-700: #15803d; --color-primary-800: #166534; --color-primary-900: #14532d; --bg-navbar: #16a34a; --color-info: #22c55e; --color-add: #22c55e; } /* ======================================== TEMA PÚRPURA (Alternativo) ======================================== */ .theme-purple { --color-primary-50: #faf5ff; --color-primary-100: #f3e8ff; --color-primary-200: #e9d5ff; --color-primary-300: #d8b4fe; --color-primary-400: #c084fc; --color-primary-500: #a855f7; --color-primary-600: #9333ea; --color-primary-700: #7e22ce; --color-primary-800: #6b21a8; --color-primary-900: #581c87; --bg-navbar: #9333ea; --color-info: #a855f7; --color-approve: #a855f7; } /* ======================================== TEMA NARANJA (Alternativo) ======================================== */ .theme-orange { --color-primary-50: #fff7ed; --color-primary-100: #ffedd5; --color-primary-200: #fed7aa; --color-primary-300: #fdba74; --color-primary-400: #fb923c; --color-primary-500: #f97316; --color-primary-600: #ea580c; --color-primary-700: #c2410c; --color-primary-800: #9a3412; --color-primary-900: #7c2d12; --bg-navbar: #ea580c; --color-warning: #f97316; } /* ======================================== TEMA VERDE OSCURO ======================================== */ .theme-green-dark { /* Colores Primarios - Ajustados para tema oscuro */ --color-primary-600: #22c55e; --color-primary-700: #4ade80; --color-primary-100: #14532d; --color-primary-800: #86efac; /* Colores de Estado - Más brillantes para contraste */ --color-success: #34d399; --color-success-light: #064e3b; --color-success-dark: #6ee7b7; --color-warning: #fbbf24; --color-warning-light: #78350f; --color-warning-dark: #fcd34d; --color-error: #f87171; --color-error-light: #7f1d1d; --color-error-dark: #fca5a5; --color-info: #34d399; --color-info-light: #064e3b; --color-info-dark: #6ee7b7; /* Colores de Acción - Más brillantes para Dark Mode */ --color-add: #34d399; --color-edit: #60a5fa; --color-delete: #f87171; --color-approve: #c084fc; /* Colores Neutros Invertidos */ --color-gray-50: #1f2937; --color-gray-100: #374151; --color-gray-200: #4b5563; --color-gray-300: #6b7280; --color-gray-400: #9ca3af; --color-gray-500: #d1d5db; --color-gray-600: #e5e7eb; --color-gray-700: #f3f4f6; --color-gray-800: #f9fafb; --color-gray-900: #ffffff; /* Colores de Fondo */ --bg-body: #111827; --bg-card: #1f2937; --bg-sidebar: #1f2937; --bg-navbar: #15803d; --bg-hover: #374151; --bg-active: #14532d; /* Colores de Texto */ --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-light: #9ca3af; --text-on-primary: #ffffff; --text-on-dark: #ffffff; /* Bordes */ --border-color: #374151; /* Sombras - Más sutiles en tema oscuro */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ======================================== TEMA PÚRPURA OSCURO ======================================== */ .theme-purple-dark { /* Colores Primarios - Ajustados para tema oscuro */ --color-primary-600: #a855f7; --color-primary-700: #c084fc; --color-primary-100: #581c87; --color-primary-800: #d8b4fe; /* Colores de Estado - Más brillantes para contraste */ --color-success: #34d399; --color-success-light: #064e3b; --color-success-dark: #6ee7b7; --color-warning: #fbbf24; --color-warning-light: #78350f; --color-warning-dark: #fcd34d; --color-error: #f87171; --color-error-light: #7f1d1d; --color-error-dark: #fca5a5; --color-info: #c084fc; --color-info-light: #581c87; --color-info-dark: #d8b4fe; /* Colores de Acción - Más brillantes para Dark Mode */ --color-add: #34d399; --color-edit: #60a5fa; --color-delete: #f87171; --color-approve: #c084fc; /* Colores Neutros Invertidos */ --color-gray-50: #1f2937; --color-gray-100: #374151; --color-gray-200: #4b5563; --color-gray-300: #6b7280; --color-gray-400: #9ca3af; --color-gray-500: #d1d5db; --color-gray-600: #e5e7eb; --color-gray-700: #f3f4f6; --color-gray-800: #f9fafb; --color-gray-900: #ffffff; /* Colores de Fondo */ --bg-body: #111827; --bg-card: #1f2937; --bg-sidebar: #1f2937; --bg-navbar: #7e22ce; --bg-hover: #374151; --bg-active: #581c87; /* Colores de Texto */ --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-light: #9ca3af; --text-on-primary: #ffffff; --text-on-dark: #ffffff; /* Bordes */ --border-color: #374151; /* Sombras - Más sutiles en tema oscuro */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ======================================== TEMA NARANJA OSCURO ======================================== */ .theme-orange-dark { /* Colores Primarios - Ajustados para tema oscuro */ --color-primary-600: #f97316; --color-primary-700: #fb923c; --color-primary-100: #7c2d12; --color-primary-800: #fdba74; /* Colores de Estado - Más brillantes para contraste */ --color-success: #34d399; --color-success-light: #064e3b; --color-success-dark: #6ee7b7; --color-warning: #fbbf24; --color-warning-light: #78350f; --color-warning-dark: #fcd34d; --color-error: #f87171; --color-error-light: #7f1d1d; --color-error-dark: #fca5a5; --color-info: #fb923c; --color-info-light: #7c2d12; --color-info-dark: #fdba74; /* Colores de Acción - Más brillantes para Dark Mode */ --color-add: #34d399; --color-edit: #60a5fa; --color-delete: #f87171; --color-approve: #c084fc; /* Colores Neutros Invertidos */ --color-gray-50: #1f2937; --color-gray-100: #374151; --color-gray-200: #4b5563; --color-gray-300: #6b7280; --color-gray-400: #9ca3af; --color-gray-500: #d1d5db; --color-gray-600: #e5e7eb; --color-gray-700: #f3f4f6; --color-gray-800: #f9fafb; --color-gray-900: #ffffff; /* Colores de Fondo */ --bg-body: #111827; --bg-card: #1f2937; --bg-sidebar: #1f2937; --bg-navbar: #c2410c; --bg-hover: #374151; --bg-active: #7c2d12; /* Colores de Texto */ --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-light: #9ca3af; --text-on-primary: #ffffff; --text-on-dark: #ffffff; /* Bordes */ --border-color: #374151; /* Sombras - Más sutiles en tema oscuro */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); } /* ======================================== UTILIDADES DE TEMA ======================================== */ /* Aplicar colores de tema usando variables CSS */ .bg-theme-primary { background-color: var(--color-primary-600); } .text-theme-primary { color: var(--color-primary-600); } .border-theme-primary { border-color: var(--color-primary-600); } .hover\:bg-theme-primary:hover { background-color: var(--color-primary-700); } /* Estados */ .bg-success { background-color: var(--color-success); } .bg-warning { background-color: var(--color-warning); } .bg-error { background-color: var(--color-error); } .bg-info { background-color: var(--color-info); } /* Transiciones suaves al cambiar tema */ * { transition-property: background-color, border-color, color; transition-duration: var(--transition-base); transition-timing-function: ease-in-out; } /* Evitar transición en elementos específicos */ .no-theme-transition, .no-theme-transition * { transition: none !important; } /* ======================================== CLASES REUTILIZABLES PARA COMPONENTES ======================================== */ /* Navbar */ .navbar { background-color: var(--bg-navbar); color: var(--text-on-primary); } .navbar-button { color: var(--text-on-primary); } .navbar-button:hover { background-color: var(--color-primary-700); opacity: 0.9; } /* Sidebar */ .sidebar { background-color: var(--bg-sidebar); border-color: var(--border-color); color: var(--text-primary); } .sidebar-link { color: var(--text-secondary); } .sidebar-link:hover { background-color: var(--bg-hover); color: var(--color-primary-600); } .sidebar-link-active { background-color: var(--bg-active); color: var(--color-primary-600); } /* Buttons */ .btn-primary { background-color: var(--color-primary-600); color: var(--text-on-primary); } .btn-primary:hover { background-color: var(--color-primary-700); } /* Modal */ .modal { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } /* Badge */ .badge-primary { background-color: var(--bg-active); color: var(--color-primary-600); } /* Card */ .card { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } /* ======================================== FORMULARIOS (Django Forms) ======================================== */ /* Inputs, Selects y Textareas */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], input[type="tel"], select, textarea { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; transition: border-color var(--transition-base), background-color var(--transition-base) !important; } /* Focus state */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="url"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--color-primary-600) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } /* Placeholder */ input::placeholder, textarea::placeholder { color: var(--text-light) !important; opacity: 0.7 !important; } /* Disabled state */ input:disabled, select:disabled, textarea:disabled { background-color: var(--bg-hover) !important; color: var(--text-light) !important; cursor: not-allowed !important; opacity: 0.6 !important; } select::-ms-expand { display: none; } /* Select específico (flechita de dropdown) */ select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; background-position: right 0.5rem center !important; background-repeat: no-repeat !important; background-size: 1.5em 1.5em !important; padding-right: 2.5rem !important; } /* Checkboxes y Radio Buttons */ input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary-600) !important; width: 1rem !important; height: 1rem !important; } /* File inputs */ input[type="file"] { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; padding: 0.5rem !important; border-radius: 0.375rem !important; } input[type="file"]::file-selector-button { background-color: var(--color-primary-600) !important; color: var(--text-on-primary) !important; border: none !important; padding: 0.375rem 0.75rem !important; border-radius: 0.25rem !important; margin-right: 0.75rem !important; cursor: pointer !important; transition: background-color var(--transition-base) !important; } input[type="file"]::file-selector-button:hover { background-color: var(--color-primary-700) !important; } /* Autocomplete inputs */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary) !important; } /* ======================================== SELECT CONTROLS - CORREGIR FLECHAS DOBLES ======================================== */ /* Tailwind CSS elimina appearance por defecto, causando flechas dobles */ select { /* Restaurar apariencia nativa del navegador */ appearance: auto; -webkit-appearance: none; -moz-appearance: none; /* Estilos base */ padding: 0.5rem 2.5rem 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background-color: var(--bg-card); color: var(--text-primary); font-size: 0.875rem; line-height: 1.5; /* Transición suave */ transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Cursor pointer */ cursor: pointer; } /* Focus state */ select:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* Disabled state */ select:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bg-hover); } /* ======================================== INPUT & TEXTAREA CONTROLS - FORMULARIOS DJANGO ======================================== */ /* Inputs de texto, número, email, etc. */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="url"], input[type="search"], input[type="tel"], textarea, .form-control { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background-color: var(--bg-card); color: var(--text-primary); font-size: 0.875rem; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Focus state para inputs */ input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, .form-control:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* Disabled state para inputs */ input[type="text"]:disabled, input[type="number"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, textarea:disabled, .form-control:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bg-hover); } /* Textarea específico */ textarea { min-height: 100px; resize: vertical; } /* Clase form-select (alias para select) */ .form-select { appearance: auto; -webkit-appearance: none; -moz-appearance: none; width: 100%; padding: 0.5rem 2.5rem 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background-color: var(--bg-card); color: var(--text-primary); font-size: 0.875rem; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .form-select:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-select:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bg-hover); } /* Error state para inputs */ input.error, select.error, textarea.error, .form-control.error, .form-select.error { border-color: var(--color-error); } input.error:focus, select.error:focus, textarea.error:focus, .form-control.error:focus, .form-select.error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } /* Placeholder styling */ input::placeholder, textarea::placeholder { color: var(--text-light); opacity: 0.7; } #username, #password { padding-left: 36px; } /* ============================================================================= CLASES UTILITARIAS ADICIONALES (Tailwind Complementarias) ============================================================================= */ /* --- Text Color Utilities --- */ .text-theme-primary { color: var(--text-primary) !important; } .text-theme-secondary { color: var(--text-secondary) !important; } .text-theme-light { color: var(--text-light) !important; } .text-theme-on-primary { color: var(--text-on-primary) !important; } .text-primary-600 { color: var(--color-primary-600) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-error { color: var(--color-error) !important; } .text-info { color: var(--color-info) !important; } /* --- Background Color Utilities --- */ .bg-theme-body { background-color: var(--bg-body) !important; } .bg-theme-card { background-color: var(--bg-card) !important; } .bg-theme-navbar { background-color: var(--bg-navbar) !important; } .bg-theme-sidebar { background-color: var(--bg-sidebar) !important; } .bg-theme-hover { background-color: var(--bg-hover) !important; } /* --- Border Utilities --- */ .border-theme { border-color: var(--border-color) !important; } /* --- Hover State Utilities --- */ .hover-bg-theme:hover { background-color: var(--bg-hover) !important; } .hover-text-primary:hover { color: var(--text-primary) !important; } .hover-bg-transparent { background-color: transparent; transition: background-color var(--transition-speed) ease; } .hover-bg-transparent:hover { background-color: var(--bg-hover) !important; } /* --- State Color Utilities (Light backgrounds for alerts) --- */ .bg-success-light { background-color: rgba(16, 185, 129, 0.1); } .bg-warning-light { background-color: rgba(245, 158, 11, 0.1); } .bg-error-light { background-color: rgba(239, 68, 68, 0.1); } .bg-info-light { background-color: rgba(59, 130, 246, 0.1); } /* --- Dark variants for text --- */ .text-success-dark { color: #047857; } .text-warning-dark { color: #92400e; } .text-error-dark { color: #991b1b; } .text-info-dark { color: #1e40af; } /* --- Alert Icon Colors --- */ .alert-icon-success { color: var(--color-success) !important; } .alert-icon-warning { color: var(--color-warning) !important; } .alert-icon-error { color: var(--color-error) !important; } .alert-icon-info { color: var(--color-info) !important; } /* --- Badge/Status Indicators --- */ .badge-success { background-color: var(--color-success); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } .badge-warning { background-color: var(--color-warning); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } .badge-error { background-color: var(--color-error); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } .badge-info { background-color: var(--color-info); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } .badge-gray { background-color: var(--text-light); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; } /* --- Theme Dot Indicators (para selector de temas) --- */ .theme-dot { width: 1rem; height: 1rem; border-radius: 9999px; margin-right: 0.75rem; flex-shrink: 0; } .theme-dot-blue { background-color: #2563eb; } .theme-dot-green { background-color: #059669; } .theme-dot-purple { background-color: #7c3aed; } .theme-dot-orange { background-color: #ea580c; } .theme-dot-dark { background-color: #1f2937; } /* --- Link Utilities --- */ .link-theme { color: var(--color-primary-600); text-decoration: none; transition: color var(--transition-speed) ease; } .link-theme:hover { color: var(--color-primary-700); text-decoration: underline; } /* --- Card Utilities --- */ .card-theme { background-color: var(--bg-card); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 1.5rem; color: var(--text-primary); } /* --- Button Utilities (complementarias) --- */ .btn-theme-success { background-color: var(--color-success); color: white; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-weight: 500; transition: all var(--transition-speed) ease; border: none; cursor: pointer; } .btn-theme-success:hover { background-color: #059669; box-shadow: var(--shadow-md); } .btn-theme-warning { background-color: var(--color-warning); color: white; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-weight: 500; transition: all var(--transition-speed) ease; border: none; cursor: pointer; } .btn-theme-warning:hover { background-color: #d97706; box-shadow: var(--shadow-md); } .btn-theme-error { background-color: var(--color-error); color: white; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-weight: 500; transition: all var(--transition-speed) ease; border: none; cursor: pointer; } .btn-theme-error:hover { background-color: #dc2626; box-shadow: var(--shadow-md); } /* --- Input Focus Ring con colores de tema --- */ .focus-ring-theme:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* --- Pagination Links --- */ .pagination-link { border: 1px solid var(--border-color); background-color: var(--bg-card); } .pagination-link:hover { background-color: var(--bg-hover); } /* --- Dropdown Menu Items --- */ .dropdown-menu-item { color: var(--text-secondary); background-color: transparent; transition: all 0.2s ease; } .dropdown-menu-item:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* --- Button Cancel --- */ .btn-cancel { background-color: var(--bg-hover); color: var(--text-primary); transition: all 0.2s ease; } .btn-cancel:hover { background-color: var(--color-gray-300); }