// Home (pacientes) — primitivos propios sobre la paleta MEDIKADO
const HC = {
ink: '#0B1F33', inkSoft: '#4A5B6E', inkMuted: '#8A9AAB',
line: '#E4E9EE', lineStrong: '#D3DCE4',
bg: '#FBFCFD', bgWarm: '#F4F6F8', bgCool: '#EEF3FA',
blue: '#1863E0', blueSoft: '#E8F0FD', blueDark: '#0F4AB5', blueInk: '#0A2E73',
green: '#13A579', greenSoft: '#E2F6EF',
amber: '#F0A020', amberSoft: '#FDF2DF',
yape: '#6E2EC2', yapeSoft: '#F1EAFB',
red: '#E23B4D', redSoft: '#FCEBED',
white: '#fff',
};
const HFONT = '"Manrope", -apple-system, system-ui, sans-serif';
// Detecta ancho móvil/tablet para ajustar tamaños que no se pueden hacer con CSS
// (p. ej. el ancho en px de los mockups de teléfono).
function useIsMobile(bp = 1040) {
const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth <= bp : false);
React.useEffect(() => {
const on = () => setM(window.innerWidth <= bp);
on(); window.addEventListener('resize', on);
return () => window.removeEventListener('resize', on);
}, [bp]);
return m;
}
const hueDot = (h) => `oklch(0.6 0.16 ${h})`;
const hueSoft = (h) => `oklch(0.95 0.04 ${h})`;
const hueIcon = (h) => `oklch(0.5 0.15 ${h})`;
function HSection({ id, children, bg, padY = 96 }) {
return ;
}
function HWrap({ children, max = 1160, style }) {
return {children}
;
}
function Eyebrow({ children, color }) {
return {children}
;
}
function H2({ children, color, align = 'left', max }) {
return {children}
;
}
function Lede({ children, color, align = 'left', max = 640 }) {
return {children}
;
}
function Btn({ children, href, kind = 'primary', size = 'md', full }) {
const s = { sm: { p: '11px 18px', fs: 14 }, md: { p: '15px 26px', fs: 15.5 }, lg: { p: '18px 32px', fs: 17 } }[size];
const kinds = {
primary: { background: `linear-gradient(135deg, ${HC.blue}, ${HC.blueDark})`, color: '#fff', border: '1.5px solid transparent', boxShadow: '0 8px 22px rgba(24,99,224,0.26)' },
ghost: { background: '#fff', color: HC.ink, border: `1.5px solid ${HC.lineStrong}`, boxShadow: '0 1px 2px rgba(11,31,51,0.04)' },
onDark: { background: '#fff', color: HC.blueDark, border: '1.5px solid transparent', boxShadow: '0 10px 30px rgba(3,20,45,0.28)' },
outlineDark: { background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1.5px solid rgba(255,255,255,0.45)', boxShadow: 'none' },
}[kind];
return (
{ e.currentTarget.style.transform = 'translateY(-2px)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
>{children}
);
}
function Pill({ children, color = HC.green, bg = HC.greenSoft, icon }) {
return (
{icon}{children}
);
}
function Card({ children, style, pad = 26 }) {
return {children}
;
}
function IconBubble({ hue, children, size = 48, bg, color }) {
return (
{children}
);
}
// Iconos (línea, 24px grid)
const HI = {
Home: (p) => ,
Stetho: (p) => ,
Bolt: (p) => ,
Shield: (p) => ,
Flask: (p) => ,
Lungs: (p) => ,
Body: (p) => ,
Heart: (p) => ,
Pin: (p) => ,
Clock: (p) => ,
Card: (p) => ,
Badge: (p) => ,
Search: (p) => ,
Chat: (p) => ,
Star: ({ size = 16, color = '#F5A623', filled = true }) => (
),
Arrow: ({ size = 18, color = '#fff' }) => (
),
Chevron: ({ size = 18, color = HC.inkMuted, open }) => (
),
Check: ({ size = 20, color = HC.green }) => (
),
};
function Ic({ size = 24, color = 'currentColor', children }) {
return ;
}
Object.assign(window, { HC, HFONT, useIsMobile, hueDot, hueSoft, hueIcon, HSection, HWrap, Eyebrow, H2, Lede, Btn, Pill, Card, IconBubble, HI, Ic });