/* ============================================================ HuertoRentable - Sistema de Temas v1.0 Modo Claro (Apple Glass) + Modo Oscuro (Moderno) CÓMO FUNCIONA: - Todas las variables semánticas se definen aquí - Los componentes en styles.css usan estas variables - Cambiar de tema solo cambia el atributo data-theme en ============================================================ */ /* ------------------------------------------------------------ TEMA CLARO - Estilo Apple Glass / Cristal Características: Transparencia, blur, superficies heladas ------------------------------------------------------------ */ :root, [data-theme="light"] { /* --- Superficies --- */ --surface-base: #f2f4f7; --surface-primary: rgba(255, 255, 255, 0.72); --surface-secondary: rgba(255, 255, 255, 0.55); --surface-tertiary: rgba(255, 255, 255, 0.38); --surface-elevated: rgba(255, 255, 255, 0.88); --surface-inset: rgba(0, 0, 0, 0.03); --surface-overlay: rgba(255, 255, 255, 0.92); --surface-hover: rgba(0, 0, 0, 0.04); --surface-active: rgba(0, 0, 0, 0.06); /* --- Textos --- */ --text-primary: #1a1a2e; --text-secondary: #4a5568; --text-tertiary: #718096; --text-muted: #a0aec0; --text-inverse: #ffffff; --text-link: var(--color-primary); --text-link-hover: var(--color-primary-dark); /* --- Bordes --- */ --border-default: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.05); --border-strong: rgba(0, 0, 0, 0.15); --border-focus: var(--color-primary); /* --- Sombras --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.15); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1); /* --- Glass Effect --- */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-border: rgba(255, 255, 255, 0.3); --glass-blur: 16px; --glass-saturate: 180%; /* --- Navbar --- */ --navbar-bg: rgba(255, 255, 255, 0.72); --navbar-border: rgba(0, 0, 0, 0.06); --navbar-text: #4a5568; --navbar-text-active: var(--color-primary); --navbar-brand: var(--color-primary); /* --- Cards --- */ --card-bg: rgba(255, 255, 255, 0.72); --card-border: rgba(255, 255, 255, 0.3); --card-hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* --- Inputs --- */ --input-bg: rgba(255, 255, 255, 0.8); --input-border: rgba(0, 0, 0, 0.12); --input-text: #1a1a2e; --input-placeholder: #a0aec0; --input-focus-ring: rgba(16, 185, 129, 0.2); /* --- Footer --- */ --footer-bg: rgba(255, 255, 255, 0.6); --footer-border: rgba(0, 0, 0, 0.06); --footer-text: #718096; /* --- Badges / Tags --- */ --badge-success-bg: rgba(16, 185, 129, 0.12); --badge-success-text: #047857; --badge-warning-bg: rgba(245, 158, 11, 0.12); --badge-warning-text: #92400e; --badge-info-bg: rgba(59, 130, 246, 0.12); --badge-info-text: #1e40af; --badge-danger-bg: rgba(239, 68, 68, 0.12); --badge-danger-text: #991b1b; --badge-neutral-bg: rgba(0, 0, 0, 0.05); --badge-neutral-text: #4a5568; /* --- Stat cards --- */ --stat-bg: var(--card-bg); --stat-label: #718096; --stat-value: #1a1a2e; /* --- Metric items --- */ --metric-bg: rgba(0, 0, 0, 0.03); --metric-value: #1a1a2e; --metric-label: #718096; /* --- Modal --- */ --modal-bg: rgba(255, 255, 255, 0.92); --modal-header-bg: rgba(0, 0, 0, 0.02); --modal-border: rgba(0, 0, 0, 0.06); --modal-backdrop: rgba(0, 0, 0, 0.3); /* --- Alerts --- */ --alert-success-bg: rgba(16, 185, 129, 0.1); --alert-success-text: #065f46; --alert-success-border: var(--color-primary); --alert-danger-bg: rgba(239, 68, 68, 0.1); --alert-danger-text: #991b1b; --alert-danger-border: var(--color-red); --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-text: #92400e; --alert-warning-border: var(--color-amber); --alert-info-bg: rgba(59, 130, 246, 0.1); --alert-info-text: #1e40af; --alert-info-border: var(--color-blue); /* --- Scrollbar --- */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(0, 0, 0, 0.15); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25); /* --- Dropdown --- */ --dropdown-bg: rgba(255, 255, 255, 0.92); --dropdown-border: rgba(0, 0, 0, 0.08); --dropdown-hover: rgba(0, 0, 0, 0.04); --dropdown-text: #1a1a2e; /* --- Toggle switch del tema --- */ --toggle-bg: #e2e8f0; --toggle-knob: #ffffff; --toggle-icon: #f59e0b; /* --- Table --- */ --table-header-bg: rgba(0, 0, 0, 0.02); --table-header-text: #4a5568; --table-border: rgba(0, 0, 0, 0.06); --table-row-hover: rgba(0, 0, 0, 0.02); /* --- Crop actions area --- */ --crop-actions-bg: rgba(0, 0, 0, 0.02); --crop-actions-border: rgba(0, 0, 0, 0.06); /* --- Qty buttons --- */ --qty-btn-bg: rgba(255, 255, 255, 0.8); --qty-btn-border: rgba(0, 0, 0, 0.12); --qty-btn-text: #4a5568; --qty-btn-hover-border: var(--color-primary); --qty-btn-hover-bg: rgba(16, 185, 129, 0.08); /* --- Loading --- */ --loading-overlay: rgba(255, 255, 255, 0.7); /* --- Selection --- */ --selection-bg: var(--color-primary-light); --selection-text: var(--color-primary-800); /* --- Auth pages --- */ --auth-gradient-start: #f2f4f7; --auth-gradient-end: #ecfdf5; } /* ------------------------------------------------------------ TEMA OSCURO - Moderno y Actual Características: Superficies oscuras, acentos vibrantes, bordes sutiles ------------------------------------------------------------ */ [data-theme="dark"] { /* --- Superficies --- */ --surface-base: #0c0c0f; --surface-primary: rgba(22, 22, 30, 0.85); --surface-secondary: rgba(30, 30, 42, 0.75); --surface-tertiary: rgba(40, 40, 56, 0.6); --surface-elevated: rgba(28, 28, 40, 0.95); --surface-inset: rgba(255, 255, 255, 0.04); --surface-overlay: rgba(22, 22, 30, 0.95); --surface-hover: rgba(255, 255, 255, 0.06); --surface-active: rgba(255, 255, 255, 0.08); /* --- Textos --- */ --text-primary: #e8e8ed; --text-secondary: #a1a1b5; --text-tertiary: #6e6e82; --text-muted: #4a4a5e; --text-inverse: #0c0c0f; --text-link: #34d399; --text-link-hover: #6ee7b7; /* --- Bordes --- */ --border-default: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.15); --border-focus: #34d399; /* --- Sombras --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px rgba(52, 211, 153, 0.2); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05); /* --- Glass Effect --- */ --glass-bg: rgba(22, 22, 30, 0.7); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: 20px; --glass-saturate: 150%; /* --- Navbar --- */ --navbar-bg: rgba(12, 12, 15, 0.8); --navbar-border: rgba(255, 255, 255, 0.06); --navbar-text: #a1a1b5; --navbar-text-active: #34d399; --navbar-brand: #34d399; /* --- Cards --- */ --card-bg: rgba(22, 22, 30, 0.75); --card-border: rgba(255, 255, 255, 0.06); --card-hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* --- Inputs --- */ --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.1); --input-text: #e8e8ed; --input-placeholder: #4a4a5e; --input-focus-ring: rgba(52, 211, 153, 0.25); /* --- Footer --- */ --footer-bg: rgba(12, 12, 15, 0.6); --footer-border: rgba(255, 255, 255, 0.06); --footer-text: #6e6e82; /* --- Badges / Tags --- */ --badge-success-bg: rgba(52, 211, 153, 0.15); --badge-success-text: #6ee7b7; --badge-warning-bg: rgba(245, 158, 11, 0.15); --badge-warning-text: #fbbf24; --badge-info-bg: rgba(59, 130, 246, 0.15); --badge-info-text: #93c5fd; --badge-danger-bg: rgba(239, 68, 68, 0.15); --badge-danger-text: #fca5a5; --badge-neutral-bg: rgba(255, 255, 255, 0.06); --badge-neutral-text: #a1a1b5; /* --- Stat cards --- */ --stat-bg: var(--card-bg); --stat-label: #6e6e82; --stat-value: #e8e8ed; /* --- Metric items --- */ --metric-bg: rgba(255, 255, 255, 0.04); --metric-value: #e8e8ed; --metric-label: #6e6e82; /* --- Modal --- */ --modal-bg: rgba(22, 22, 30, 0.96); --modal-header-bg: rgba(255, 255, 255, 0.03); --modal-border: rgba(255, 255, 255, 0.06); --modal-backdrop: rgba(0, 0, 0, 0.6); /* --- Alerts --- */ --alert-success-bg: rgba(52, 211, 153, 0.1); --alert-success-text: #6ee7b7; --alert-success-border: #34d399; --alert-danger-bg: rgba(239, 68, 68, 0.1); --alert-danger-text: #fca5a5; --alert-danger-border: #f87171; --alert-warning-bg: rgba(245, 158, 11, 0.1); --alert-warning-text: #fbbf24; --alert-warning-border: #f59e0b; --alert-info-bg: rgba(59, 130, 246, 0.1); --alert-info-text: #93c5fd; --alert-info-border: #60a5fa; /* --- Scrollbar --- */ --scrollbar-track: transparent; --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2); /* --- Dropdown --- */ --dropdown-bg: rgba(22, 22, 30, 0.95); --dropdown-border: rgba(255, 255, 255, 0.08); --dropdown-hover: rgba(255, 255, 255, 0.06); --dropdown-text: #e8e8ed; /* --- Toggle switch del tema --- */ --toggle-bg: #2d2d3f; --toggle-knob: #e8e8ed; --toggle-icon: #8b5cf6; /* --- Table --- */ --table-header-bg: rgba(255, 255, 255, 0.03); --table-header-text: #a1a1b5; --table-border: rgba(255, 255, 255, 0.06); --table-row-hover: rgba(255, 255, 255, 0.04); /* --- Crop actions area --- */ --crop-actions-bg: rgba(255, 255, 255, 0.03); --crop-actions-border: rgba(255, 255, 255, 0.06); /* --- Qty buttons --- */ --qty-btn-bg: rgba(255, 255, 255, 0.06); --qty-btn-border: rgba(255, 255, 255, 0.1); --qty-btn-text: #a1a1b5; --qty-btn-hover-border: #34d399; --qty-btn-hover-bg: rgba(52, 211, 153, 0.12); /* --- Loading --- */ --loading-overlay: rgba(12, 12, 15, 0.7); /* --- Selection --- */ --selection-bg: rgba(52, 211, 153, 0.3); --selection-text: #e8e8ed; /* --- Auth pages --- */ --auth-gradient-start: #0c0c0f; --auth-gradient-end: #0f1a15; /* --- Override Bootstrap dark --- */ color-scheme: dark; } /* ------------------------------------------------------------ TRANSICIÓN SUAVE ENTRE TEMAS ------------------------------------------------------------ */ html { transition: background-color 0.4s ease, color 0.4s ease; } html[data-theme] body, html[data-theme] .navbar-huerto, html[data-theme] .stat-card, html[data-theme] .crop-card, html[data-theme] .card-modern, html[data-theme] .modal-content, html[data-theme] .footer-huerto, html[data-theme] .form-control-modern, html[data-theme] .alert-modern, html[data-theme] .filter-bar, html[data-theme] .chart-container, html[data-theme] .auth-card { transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; } /* ------------------------------------------------------------ TOGGLE DEL TEMA - Botón en navbar ------------------------------------------------------------ */ .theme-toggle { position: relative; width: 44px; height: 24px; background: var(--toggle-bg); border-radius: 12px; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; transition: background 0.3s ease; flex-shrink: 0; } .theme-toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .theme-toggle .toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--toggle-knob); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .theme-toggle .toggle-knob .icon-sun, .theme-toggle .toggle-knob .icon-moon { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; } .theme-toggle .toggle-knob .icon-sun { color: #f59e0b; } .theme-toggle .toggle-knob .icon-moon { color: #8b5cf6; } /* Estado Light: sol visible, luna oculta, toggle izquierda */ [data-theme="light"] .theme-toggle .toggle-knob { transform: translateX(0); } [data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg); } /* Estado Dark: luna visible, sol oculto, toggle derecha */ [data-theme="dark"] .theme-toggle .toggle-knob { transform: translateX(20px); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); } /* ------------------------------------------------------------ GLASS CARD MIXIN - Para uso general Aplica efecto cristal a cualquier elemento con clase .glass ------------------------------------------------------------ */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); } /* ------------------------------------------------------------ DARK MODE: Override de colores de Bootstrap ------------------------------------------------------------ */ [data-theme="dark"] .text-muted { color: var(--text-tertiary) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .bg-white { background-color: var(--surface-primary) !important; } [data-theme="dark"] .bg-light { background-color: var(--surface-secondary) !important; } [data-theme="dark"] .border { border-color: var(--border-default) !important; } [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-default); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); } [data-theme="dark"] .dropdown-menu { background: var(--dropdown-bg); border-color: var(--dropdown-border); } [data-theme="dark"] .dropdown-item { color: var(--dropdown-text); } [data-theme="dark"] .dropdown-item:hover { background: var(--dropdown-hover); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .modal-backdrop { --bs-backdrop-opacity: 0.7; } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }