/* Estilo global de Hapwork Happy. Complementa a Tailwind con lo que las utilidades no cubren bien: el fondo con brillos, el efecto "glass" de tarjetas y sidebar, y la barra de scroll. La paleta sigue la referencia visual: fondo casi negro con calidez naranja y acentos ámbar. */ :root { --naranja: #f97316; --naranja-suave: #fdba74; --fondo: #0c0a09; } html { background: var(--fondo); } body { min-height: 100vh; background: radial-gradient(1000px 500px at 85% -10%, rgba(249, 115, 22, 0.16), transparent 60%), radial-gradient(800px 400px at -10% 110%, rgba(249, 115, 22, 0.08), transparent 60%), var(--fondo); color: #e7e5e4; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } /* Tarjetas y superficies con efecto vidrio */ .glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 1rem; } .glass-hover:hover { border-color: rgba(249, 115, 22, 0.4); box-shadow: 0 0 30px rgba(249, 115, 22, 0.08); transition: all 0.2s ease; } /* Enlace del menú lateral */ .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; border-radius: 0.75rem; color: #a8a29e; font-size: 0.9rem; transition: all 0.15s ease; } .nav-link:hover { color: #fafaf9; background: rgba(255, 255, 255, 0.05); } .nav-link.activo { color: #fdba74; background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.25); } /* Botón principal naranja (como "Abrir y probar" de la referencia) */ .btn-naranja { background: linear-gradient(180deg, #fb923c, #f97316); color: #1c1917; font-weight: 600; border-radius: 0.75rem; padding: 0.55rem 1.1rem; transition: filter 0.15s ease; } .btn-naranja:hover { filter: brightness(1.08); } /* Chips de estado */ .chip { display: inline-flex; align-items: center; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.12); color: #d6d3d1; } .chip-verde { color: #86efac; border-color: rgba(134, 239, 172, 0.35); background: rgba(34, 197, 94, 0.08); } .chip-naranja { color: #fdba74; border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.08); } /* Scrollbar discreta acorde al tema */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* --------------------------------------------------------------------------- Menú lateral colapsable (solo escritorio, lg: 1024px en adelante). El estado vive en la clase "menu-colapsado" del (la pone app.js y se restaura desde localStorage antes del primer render, ver base.html). La animación es por CSS: el ancho del menú, el padding del contenido y la opacidad de los textos transicionan a la vez para que se sienta fluido. --------------------------------------------------------------------------- */ /* Los textos del menú se desvanecen y colapsan su ancho (no un display:none brusco), para que la transición del ancho se vea continua. */ .texto-menu { transition: opacity 0.18s ease, max-width 0.25s ease; max-width: 12rem; overflow: hidden; white-space: nowrap; } /* Tamaño de los iconos del menú también aquí (mismo valor que w-4/h-4 de Tailwind) para que el carril colapsado nunca quede sin iconos visibles. */ .nav-link svg, .flecha-colapso { width: 1rem; height: 1rem; flex-shrink: 0; } @media (min-width: 1024px) { /* Ancho y padding declarados también aquí (mismos valores que w-64 y lg:pl-72 de Tailwind) para que la transición sea estable aunque Tailwind CDN tarde en generar sus utilidades. */ #sidebar { width: 16rem; transition: width 0.25s ease, transform 0.2s ease; } #contenido-principal { padding-left: 18rem; transition: padding-left 0.25s ease; } /* Girar la flecha del botón cuando el menú está retraído */ .flecha-colapso { transition: transform 0.25s ease; } html.menu-colapsado .flecha-colapso { transform: rotate(180deg); } /* ---- Estado retraído ---- */ html.menu-colapsado #sidebar { width: 4.75rem; /* solo iconos */ } html.menu-colapsado #contenido-principal { padding-left: 6.5rem; /* recupera el espacio del menú */ } html.menu-colapsado .texto-menu { opacity: 0; max-width: 0; } /* Títulos de módulo: al retraer se sustituyen por una línea divisoria */ html.menu-colapsado .titulo-modulo { border-top: 1px solid rgba(255, 255, 255, 0.08); height: 0; padding: 0; margin: 0.35rem 0.6rem; } /* Elementos que no tienen versión compacta (selector de empresa, Salir) */ html.menu-colapsado .ocultar-colapsado { display: none; } /* Iconos centrados en el carril angosto */ html.menu-colapsado .nav-link { justify-content: center; gap: 0; padding-left: 0.5rem; padding-right: 0.5rem; } html.menu-colapsado .pie-usuario { justify-content: center; } } /* --------------------------------------------------------------------------- TEMA CLARO El tema por defecto del sistema es el oscuro (definido arriba). El tema claro se activa agregando la clase "tema-claro" al : - base.html decide el tema ANTES del primer render: usa el guardado en localStorage ("tema") y, si el usuario nunca ha elegido, toma la preferencia del sistema operativo/navegador (prefers-color-scheme). - El botón de sol/luna del encabezado (alternarTema en app.js) cambia de tema y guarda la elección. ¿Por qué overrides y no reescribir las plantillas? Las plantillas usan utilidades de Tailwind pensadas para fondo oscuro (text-stone-100, border-white/10…). Redefinir aquí esas mismas clases bajo el selector "html.tema-claro" gana en especificidad (dos clases contra una) sin tocar ni una plantilla, y mantiene un único punto de mantenimiento del tema. --------------------------------------------------------------------------- */ html.tema-claro { --fondo: #faf8f5; background: var(--fondo); } html.tema-claro body { background: radial-gradient(1000px 500px at 85% -10%, rgba(249, 115, 22, 0.10), transparent 60%), radial-gradient(800px 400px at -10% 110%, rgba(249, 115, 22, 0.06), transparent 60%), var(--fondo); color: #292524; } /* Superficies: el "vidrio" pasa de blanco translúcido a blanco casi sólido */ html.tema-claro .glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.75)); border: 1px solid rgba(28, 25, 23, 0.10); box-shadow: 0 1px 8px rgba(28, 25, 23, 0.05); } html.tema-claro .glass-hover:hover { border-color: rgba(249, 115, 22, 0.45); box-shadow: 0 0 30px rgba(249, 115, 22, 0.12); } /* Textos: la escala stone se invierte (claros -> oscuros) */ html.tema-claro .text-stone-100 { color: #1c1917; } html.tema-claro .text-stone-200 { color: #292524; } html.tema-claro .text-stone-300 { color: #44403c; } html.tema-claro .text-stone-400 { color: #57534e; } html.tema-claro .text-stone-500 { color: #79716b; } html.tema-claro .text-stone-600 { color: #8f867e; } html.tema-claro .hover\:text-stone-300:hover { color: #1c1917; } html.tema-claro .text-orange-200 { color: #9a3412; } html.tema-claro .text-orange-300 { color: #c2410c; } html.tema-claro .text-orange-400 { color: #ea580c; } html.tema-claro .hover\:text-orange-300:hover { color: #c2410c; } html.tema-claro .text-red-300 { color: #b91c1c; } /* Bordes blancos translúcidos -> grises suaves */ html.tema-claro .border-white\/5 { border-color: rgba(28, 25, 23, 0.06); } html.tema-claro .border-white\/10 { border-color: rgba(28, 25, 23, 0.10); } html.tema-claro .border-white\/15 { border-color: rgba(28, 25, 23, 0.15); } /* Fondos oscuros de inputs, selects y paneles -> blancos */ html.tema-claro .bg-stone-900, html.tema-claro .bg-stone-900\/70, html.tema-claro .bg-stone-900\/80 { background-color: #ffffff; color: #292524; } html.tema-claro .bg-stone-950\/60 { background-color: rgba(250, 248, 245, 0.9); } html.tema-claro .bg-white\/\[0\.03\] { background-color: rgba(28, 25, 23, 0.03); } html.tema-claro .hover\:bg-white\/\[0\.03\]:hover { background-color: rgba(28, 25, 23, 0.04); } html.tema-claro .hover\:bg-white\/5:hover { background-color: rgba(28, 25, 23, 0.05); } /* Chips */ html.tema-claro .chip { border-color: rgba(28, 25, 23, 0.15); color: #44403c; } html.tema-claro .chip-verde { color: #15803d; border-color: rgba(21, 128, 61, 0.35); background: rgba(34, 197, 94, 0.10); } html.tema-claro .chip-naranja { color: #c2410c; border-color: rgba(249, 115, 22, 0.40); background: rgba(249, 115, 22, 0.10); } /* Menú lateral */ html.tema-claro .nav-link { color: #57534e; } html.tema-claro .nav-link:hover { color: #1c1917; background: rgba(28, 25, 23, 0.05); } html.tema-claro .nav-link.activo { color: #c2410c; background: rgba(249, 115, 22, 0.10); border-color: rgba(249, 115, 22, 0.30); } /* Scrollbar */ html.tema-claro ::-webkit-scrollbar-thumb { background: rgba(28, 25, 23, 0.18); } /* Botón de tema: en oscuro se ve el sol (ir a claro) y en claro la luna */ html.tema-claro .icono-sol { display: none; } html:not(.tema-claro) .icono-luna { display: none; }