/* Layout de la cáscara: lo que no es un componente del design system. * * La barra, la dropzone, los avisos, el progreso y las tarjetas viven en * @eco/ds (clases `eco-*`). Acá queda sólo el armado de las pantallas de la * cáscara: el lienzo, el tablero y la puerta de entrada. * * Ni un hex ni una fuente: todo sale de los tokens. */ /* ── El lienzo: la caja donde vive el contenido de cualquier app ────────── */ .eco-lienzo { max-width: var(--ancho-app); margin: 0 auto; padding: var(--e-8) var(--e-6) var(--e-16); } /* Las apps que necesitan todo el alto (Creativos) lo piden con esto. */ .eco-lienzo--completo { max-width: none; padding: 0; height: calc(100vh - var(--alto-barra)); } .eco-barra__marca-sel { display: inline-flex; align-items: center; } /* ── Tablero ───────────────────────────────────────────────────────────── */ .tablero { display: flex; flex-direction: column; gap: var(--e-8); } .tablero__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; } .tablero__titular { margin: var(--e-2) 0 0; font-size: var(--display-lg); line-height: var(--linea-apretada); } .tablero__bajada { margin: var(--e-3) 0 0; font-size: var(--texto-lg); color: var(--tinta-media); max-width: 48ch; } .tablero__apps { display: flex; flex-direction: column; gap: var(--e-4); } .tablero__seccion { margin: 0; font-size: var(--texto-xl); } .tablero__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-4); } .tarjeta-app { text-decoration: none; color: inherit; } .tarjeta-app:hover { text-decoration: none; } .tarjeta-app__tope { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); } .tarjeta-app__icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radio-md); background: var(--fondo-hundido); color: var(--tinta-media); font-size: 20px; } /* La app que reclama atención se distingue por el borde y el ícono lleno, no por un color de fondo: la tarjeta sigue siendo una tarjeta. */ .tarjeta-app.es-urgente { border-color: var(--acento); box-shadow: var(--sombra-md); } .tarjeta-app.es-urgente .tarjeta-app__icono { background: var(--acento); color: var(--sobre-acento); } .tarjeta-app__error { margin: var(--e-2) 0 0; font-size: var(--texto-xs); color: var(--tinta-suave); } /* ── Puerta de entrada y páginas sueltas ───────────────────────────────── */ /* La puerta se centra en la ventana entera, asi que el lienzo que la contiene no le puede poner ancho maximo ni relleno. Antes no hacia falta porque `.centrado` iba en el ; ahora esa pantalla vive adentro del layout de la suite, como cualquier otra. */ main.eco-lienzo:has(> .centrado) { max-width: none; padding: 0; } .centrado { display: grid; place-items: center; min-height: 100vh; padding: var(--e-6); background: var(--fondo); } .entrada { width: min(360px, 100%); display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-8); } .entrada__marca { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--fuente-display); font-weight: var(--peso-display); font-size: var(--texto-lg); } .entrada__error { margin: 0; font-size: var(--texto-sm); color: var(--peligro); } .centrado-bloque { max-width: 46ch; margin: 14vh auto; text-align: center; display: flex; flex-direction: column; gap: var(--e-4); align-items: center; } /* ── Pila de toasts ────────────────────────────────────────────────────── */ .eco-toasts { position: fixed; right: var(--e-6); bottom: var(--e-6); z-index: 80; display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-end; }