/* ============================================================ MALTEF PRO — Sistema de temas Tema por defecto (azul oscuro #060b18): definido en cada plantilla. Estos bloques sobreescriben las variables cuando lleva data-theme="light" o data-theme="black" (lo aplica theme.js). La especificidad :root[data-theme] gana sobre el :root de las plantillas sin necesidad de !important en las variables. ============================================================ */ /* ─────────────── MODO CLARO ─────────────── */ :root[data-theme="light"] { color-scheme: light; /* Fondos */ --bg: #eef1f8; --bg-2: #ffffff; --bg-3: #e4e9f4; /* Superficies (antes blancos translúcidos, ahora azul-tinta translúcido) */ --surface: rgba(23, 37, 84, 0.05); --surface2: rgba(23, 37, 84, 0.09); --surface3: rgba(23, 37, 84, 0.12); --surf-h: rgba(23, 37, 84, 0.08); --panel: #ffffff; /* Bordes */ --border: rgba(23, 37, 84, 0.13); --border2: rgba(23, 37, 84, 0.24); --border-h: rgba(23, 37, 84, 0.24); --border-soft: rgba(23, 37, 84, 0.09); /* Texto */ --text: #16203a; --text-2: #46536f; --text-3: #74809c; --text-muted: #74809c; /* Acentos (oscurecidos para contraste AA sobre fondo claro) */ --blue: #3b63ee; --blue-l: #2b50d0; --violet: #6d28d9; --cyan: #0270a8; --cyan-l: #02598a; --pink: #d61f69; --green: #0a8a60; --amber: #a16207; --red: #d92626; /* Tokens del design system */ --primary: #4f46e5; --primary-l: #4338ca; --primary-d: #3730a3; --accent: #d61f69; --accent-l: #be185d; --success: #0a8a60; --warning: #a16207; --danger: #d92626; --info: #0270a8; --grad: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%); --shadow-sm: 0 2px 8px rgba(23, 37, 84, 0.08); --shadow-md: 0 8px 24px rgba(23, 37, 84, 0.10); --shadow-lg: 0 20px 48px rgba(23, 37, 84, 0.14); /* Editor de flujo del recetario (recetario_recetas.html): canvas y tarjetas de nodo */ --panel-2: #ffffff; --canvas-bg: #e4e9f4; --node-grad-1: #ffffff; --node-grad-2: #f3f6fb; --flow-dot: rgba(23, 37, 84, 0.10); } /* Patrón de puntos y brillos de fondo, adaptados a claro */ :root[data-theme="light"] body::before { background-image: radial-gradient(rgba(23, 37, 84, 0.07) 1px, transparent 1px) !important; } :root[data-theme="light"] body::after { opacity: 0.35; } /* Formularios: muchas plantillas usan blancos translúcidos fijos que desaparecen sobre fondo claro. Se fuerzan valores legibles. */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background-color: #ffffff; border-color: rgba(23, 37, 84, 0.20); color: var(--text); } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #8d97b3; } :root[data-theme="light"] select option { background: #ffffff; color: var(--text); } /* Contenedores frecuentes con fondo blanco-translúcido fijo */ :root[data-theme="light"] .form-card, :root[data-theme="light"] .panel, :root[data-theme="light"] .card, :root[data-theme="light"] .kpi { background: var(--bg-2); border-color: var(--border); } /* Títulos: muchas plantillas usan color:#fff fijo, invisible sobre claro */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4, :root[data-theme="light"] h5, :root[data-theme="light"] h6 { color: var(--text); } /* Barras de navegación con fondo oscuro fijo (rgba(6,11,24,...)) */ :root[data-theme="light"] nav, :root[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.78); } :root[data-theme="light"] nav.scrolled { background: rgba(255, 255, 255, 0.95); } /* Pantallas de selección a pantalla completa (recetario) con fondo fijo */ :root[data-theme="light"] .picker-screen { background: var(--bg); } :root[data-theme="light"] .picker-screen::before { background-image: radial-gradient(rgba(23, 37, 84, 0.07) 1px, transparent 1px) !important; } /* Modales, paneles de sugerencias y POS con fondos oscuros fijos */ :root[data-theme="light"] .modal-box, :root[data-theme="light"] .modal-content, :root[data-theme="light"] #clienteSugerencias, :root[data-theme="light"] .search-results, :root[data-theme="light"] .arrow-btn, :root[data-theme="light"] .area-modal, :root[data-theme="light"] .var-modal, :root[data-theme="light"] .flow-search-results, :root[data-theme="light"] .insumo-search-results, :root[data-theme="light"] .port-in, :root[data-theme="light"] .port-out { background: var(--bg-2); } /* Tarjetas del picker del recetario (fondos blanco-translúcido fijos) */ :root[data-theme="light"] .picker-card { background: var(--bg-2); border-color: var(--border); } :root[data-theme="light"] .picker-card:hover { background: var(--bg-3); border-color: var(--border2); } :root[data-theme="light"] .picker-card-add { background: transparent; border-color: var(--border2); } :root[data-theme="light"] .picker-card-add .picker-avatar { background: var(--surface2); } :root[data-theme="light"] .curve-wrap { background: var(--bg-3); } :root[data-theme="light"] .pos-left, :root[data-theme="light"] .pos-right { background: var(--bg-2); } /* Modales construidos con estilo en línea (background:#0d1526 / #0d1529) */ :root[data-theme="light"] [style*="background:#0d1526"], :root[data-theme="light"] [style*="background: #0d1526"], :root[data-theme="light"] [style*="background:#0d1529"], :root[data-theme="light"] [style*="background: #0d1529"] { background: var(--bg-2) !important; } /* Hover en modo claro: las plantillas resaltan ACLARANDO con blancos translúcidos (rgba(255,255,255,...)), que sobre fondo claro no se ven. Aquí se invierte: el hover OSCURECE con tinta azul-gris translúcida. */ :root[data-theme="light"] tbody tr:hover, :root[data-theme="light"] details summary:hover, :root[data-theme="light"] .profile-item:hover { background: rgba(23, 37, 84, 0.06); } :root[data-theme="light"] .btn-secondary:hover, :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .btn-sm-gray:hover, :root[data-theme="light"] .btn-back:hover, :root[data-theme="light"] .btn-ver:hover, :root[data-theme="light"] .btn-close:hover, :root[data-theme="light"] .slider-btn:hover, :root[data-theme="light"] .modal-btn-gray:hover, :root[data-theme="light"] .modal-btn-cancelar:hover, :root[data-theme="light"] .secondary:hover, :root[data-theme="light"] .color-preset:hover { background: rgba(23, 37, 84, 0.12); color: var(--text); } :root[data-theme="light"] .back-link:hover { background: rgba(23, 37, 84, 0.08); } /* Landing: enlaces y marca con blancos fijos */ :root[data-theme="light"] .footer-brand .brand-logo, :root[data-theme="light"] .brand-name { color: var(--text); } :root[data-theme="light"] .footer-col ul li a:hover { color: var(--text); } :root[data-theme="light"] .btn-ghost:hover { border-color: rgba(23, 37, 84, 0.30); } /* En tema claro, el mockup de la landing también debe verse claro (sin quedarse en la paleta azul/oscura). */ :root[data-theme="light"] .mock-window { --bg-2: #ffffff; --bg-3: #eef2f8; --surface: rgba(15, 23, 42, 0.035); --surf-h: rgba(15, 23, 42, 0.06); --border: rgba(15, 23, 42, 0.10); --border-h: rgba(15, 23, 42, 0.18); --text: #172033; --text-2: #4b5a75; --text-3: #75819a; --blue-l: #4b5a75; --green: #10b981; --amber: #f59e0b; background: #ffffff; border-color: rgba(15, 23, 42, 0.18); } :root[data-theme="light"] .mock-window h1, :root[data-theme="light"] .mock-window h2, :root[data-theme="light"] .mock-window h3 { color: #172033; } :root[data-theme="light"] .mock-kpi-val { color: #172033; } :root[data-theme="light"] .mock-window .mock-kpi, :root[data-theme="light"] .mock-window .mock-row, :root[data-theme="light"] .mock-window .mock-bottom { background: rgba(15, 23, 42, 0.035); border-color: rgba(15, 23, 42, 0.10); } /* La maqueta usa varios estilos inline con azules fijos; en tema claro se normalizan para que no quede visualmente "azul". */ :root[data-theme="light"] .mock-window [style*="color:#7a99ff"], :root[data-theme="light"] .mock-window [style*="color: #7a99ff"], :root[data-theme="light"] .mock-window [style*="color:#67e8f9"], :root[data-theme="light"] .mock-window [style*="color: #67e8f9"], :root[data-theme="light"] .mock-window [style*="color:#a0c8ff"], :root[data-theme="light"] .mock-window [style*="color: #a0c8ff"] { color: #4b5a75 !important; } :root[data-theme="light"] .mock-window [style*="background:rgba(71,112,245"], :root[data-theme="light"] .mock-window [style*="background: rgba(71,112,245"], :root[data-theme="light"] .mock-window [style*="background:rgba(6,182,212"], :root[data-theme="light"] .mock-window [style*="background: rgba(6,182,212"] { background: rgba(15, 23, 42, 0.05) !important; } :root[data-theme="light"] .mock-window [style*="border:1px solid rgba(71,112,245"], :root[data-theme="light"] .mock-window [style*="border: 1px solid rgba(71,112,245"], :root[data-theme="light"] .mock-window [style*="border:1px solid rgba(6,182,212"], :root[data-theme="light"] .mock-window [style*="border: 1px solid rgba(6,182,212"] { border-color: rgba(15, 23, 42, 0.16) !important; } /* ─────────────── MODO NEGRO TOTAL ─────────────── */ :root[data-theme="black"] { color-scheme: dark; --bg: #000000; --bg-2: #070709; --bg-3: #0e0e13; --surface: rgba(255, 255, 255, 0.05); --surface2: rgba(255, 255, 255, 0.085); --surface3: rgba(255, 255, 255, 0.11); --surf-h: rgba(255, 255, 255, 0.08); --panel: rgba(14, 14, 19, 0.85); --border: rgba(255, 255, 255, 0.10); --border2: rgba(255, 255, 255, 0.17); --border-h: rgba(255, 255, 255, 0.17); --border-soft: rgba(255, 255, 255, 0.07); /* Texto neutro (sin tinte azul del tema por defecto) */ --text: #f4f4f6; --text-2: #a6a6b3; --text-3: #5e5e6c; --text-muted: #8a8a98; /* Editor de flujo del recetario: canvas y tarjetas de nodo sin tinte azul */ --panel-2: #0b0b10; --canvas-bg: #000000; --node-grad-1: #131316; --node-grad-2: #0c0c0f; --flow-dot: rgba(255, 255, 255, 0.05); } /* Atenuar los brillos azul/violeta del fondo en negro total */ :root[data-theme="black"] body::after { opacity: 0.45; } /* En negro total, quitar el tinte azul de navbars, overlays y modales fijos */ :root[data-theme="black"] nav, :root[data-theme="black"] .navbar { background: rgba(0, 0, 0, 0.85); } :root[data-theme="black"] .picker-screen { background: #000000; } :root[data-theme="black"] .modal-box, :root[data-theme="black"] .modal-content, :root[data-theme="black"] #clienteSugerencias, :root[data-theme="black"] .search-results, :root[data-theme="black"] .area-modal, :root[data-theme="black"] .var-modal, :root[data-theme="black"] .flow-search-results, :root[data-theme="black"] .insumo-search-results, :root[data-theme="black"] .curve-wrap { background: #0b0b10; } :root[data-theme="black"] .pos-left, :root[data-theme="black"] .pos-right { background: rgba(0, 0, 0, 0.92); } :root[data-theme="black"] [style*="background:#0d1526"], :root[data-theme="black"] [style*="background: #0d1526"], :root[data-theme="black"] [style*="background:#0d1529"], :root[data-theme="black"] [style*="background: #0d1529"] { background: #0b0b10 !important; } /* ─────────────── BOTÓN FLOTANTE DE TEMA ─────────────── */ .theme-toggle-btn { position: fixed; bottom: 18px; left: 18px; z-index: 99999; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border2, rgba(255, 255, 255, 0.15)); background: var(--bg-2, #0c1427); color: var(--text, #f0f4ff); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; /* Fuerza su propia capa de composición — sin esto, en algunos navegadores móviles un elemento fixed puede "vibrar"/rezagarse un instante durante el scroll en vez de quedar perfectamente quieto. Sin will-change permanente: en un ícono que casi nunca anima, dejarlo prendido indefinidamente puede presionar la memoria de GPU en celulares de gama baja y hacer que el navegador termine soltando la capa (el ícono "desaparece" después de un rato). */ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .theme-toggle-btn:hover { transform: translateZ(0) scale(1.1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] .theme-toggle-btn { box-shadow: 0 6px 24px rgba(23, 37, 84, 0.18); } @media print { .theme-toggle-btn { display: none; } }