/* Tema visual compartido — capa de ambiente que se carga sobre Tailwind CDN. Objetivo: quitar la sensación "demasiado blanca" con un fondo sutilmente verdoso (sage) y dar profundidad a las tarjetas, manteniendo la estética minimalista tanto en móvil como en escritorio. Se apoya en las clases que ya están en el marcado (bg-white, rounded-2xl, border, card-hover) con selectores de mayor especificidad que las utilidades de Tailwind, de modo que no hace falta tocar cada tarjeta una a una. El ya no lleva la utilidad bg-[#f7f9f5]: el fondo lo pone esta hoja. */ :root { --sombra-verde: 20, 83, 45; /* verde oscuro base para sombras (en vez de negro puro) */ --linea-panel: rgba(20, 83, 45, .10); } /* Fondo de página: sage suave con un halo lima muy tenue en la parte superior. Sustituye al antiguo #f7f9f5 (casi blanco) por algo con más carácter sin dejar de ser claro y sobrio. */ body { background-color: #e8eee2; background-image: radial-gradient(1100px 440px at 50% -140px, rgba(132, 204, 22, .16), transparent 66%), linear-gradient(180deg, #eef2ea 0%, #e5ebdf 100%); background-repeat: no-repeat; background-size: 100% 100%; min-height: 100vh; } /* Barra superior: mantiene el blanco (contrasta bien con el fondo verdoso) pero se despega con una sombra suave en lugar de solo una línea inferior. */ nav.sticky { box-shadow: 0 1px 0 rgba(var(--sombra-verde), .05), 0 8px 24px -20px rgba(var(--sombra-verde), .55); } /* Paneles blancos (tarjetas, barra de filtros, contenedor de la tabla, celdas de subproyectos…): borde más tenue y una sombra suave para que "floten" sobre el fondo. Se excluyen los modales (no llevan .border, conservan su propia shadow-xl fuerte sobre el overlay oscuro). */ .bg-white.rounded-2xl.border { border-color: var(--linea-panel); box-shadow: 0 1px 2px rgba(var(--sombra-verde), .04), 0 14px 32px -24px rgba(var(--sombra-verde), .40); } /* Realce al pasar el ratón sobre tarjetas clicables (proyectos/subproyectos). Mayor especificidad que .card-hover:hover para reforzar la sombra sin perder el desplazamiento vertical que ya define la página. */ .bg-white.rounded-2xl.border.card-hover:hover { transform: translateY(-3px); border-color: rgba(var(--sombra-verde), .20); box-shadow: 0 2px 4px rgba(var(--sombra-verde), .06), 0 22px 40px -24px rgba(var(--sombra-verde), .50); }