marcos/motor-de-encuestas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Con la marca incorporada primera versión

Browse Source
This commit is contained in:
markosbenitez
2026-06-04 22:49:25 -03:00
parent b1ca0e0795
commit b813622e30
13 changed files with 233 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/globals.css
View File

@@ -2,18 +2,27 @@
/* ── Tokens ── */
:root {
/* ── Marca RE ── */
--color-re-teal: #43BBC8;
--color-re-dark: #494F4F;
--color-re-orange: #F8AD13;
--color-re-orange-intense: #EE761A;
--color-re-light: #E7E6E5;
--color-re-white: #FFFFFF;
/* ── Sistema (primario = teal RE) ── */
--color-bg: #f9fafb;
--color-surface: #ffffff;
--color-text: #111827;
--color-text-muted: #6b7280;
--color-primary: #1d4ed8;
--color-primary-hover: #1e40af;
--color-primary-light: #dbeafe;
--color-accent: #2563eb;
--color-primary: #43BBC8;
--color-primary-hover: #3DAAB6;
--color-primary-light: #e8f8fa;
--color-accent: #43BBC8;
--color-error: #b91c1c;
--color-error-bg: #fef2f2;
--color-border: #d1d5db;
--color-border-focus: #2563eb;
--color-border-focus: #43BBC8;
--color-sensitive: #fef3c7;
--color-sensitive-border: #f59e0b;
--radius: 8px;
@@ -494,6 +503,46 @@ body {
.btn { width: 100%; }
}
/* ── Survey header (marca RE) ── */
.survey-header-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 24px;
position: sticky;
top: 0;
z-index: 20;
}
.survey-header-logo { display: block; height: 48px; width: auto; flex-shrink: 0; }
.survey-header-title {
color: var(--color-re-white);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
}
/* ── Survey footer ── */
.survey-footer-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
margin-top: 40px;
}
.survey-footer-group {
display: flex;
align-items: center;
gap: 8px;
}
.survey-footer-label {
color: rgba(255,255,255,0.7);
font-size: 0.75rem;
white-space: nowrap;
}
.survey-footer-logo { height: 32px; width: auto; display: block; }
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

8
app/layout.tsx
View File

@@ -1,5 +1,7 @@
import type { Metadata, Viewport } from 'next'
import './globals.css'
import { SurveyHeader } from '@/components/survey-header'
import { SurveyFooter } from '@/components/survey-footer'
export const metadata: Metadata = {
title: 'Mapeo de Cuidadores',
@@ -17,7 +19,11 @@ export const viewport: Viewport = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body>{children}</body>
<body>
<SurveyHeader />
<div className="layout-content">{children}</div>
<SurveyFooter />
</body>
</html>
)
}