* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #fafafa; /* IMPORTANTE: NO ponemos padding via env(safe-area-inset-*) en body. Si lo hacemos, el contenido del body se desplaza pero los elementos `position: fixed` (navbar, drawer, FAB) se calculan contra el VIEWPORT, no contra el body. Resultado: el navbar queda "fuera de fase" con el contenido y aparece desalineado o salido. Aplicamos safe-area directamente en CADA elemento fixed que la necesita (navbar, FAB, sheet — más abajo). */ /* Scroll suave para anchors internos. */ scroll-behavior: smooth; /* Previene zoom horizontal accidental en mobile (algunos textos largos o inputs raros pueden disparar overflow-x). */ overflow-x: hidden; /* Mejora del tap behavior en iOS (sin "highlight" gris al tocar). */ -webkit-tap-highlight-color: transparent; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Safe areas iOS aplicadas al navbar fijo, no al body. ────────────── El navbar usa position:fixed; top:0; left:0; right:0. Le agregamos padding-top: env(safe-area-inset-top) para que el contenido baje cuando hay notch, y le ensanchamos el padding lateral con safe-area-inset-left y right para landscape con notch. La altura del navbar la deja el JS (64px); este padding lo absorbe el contenedor interno. */ nav[role="navigation"], nav.app-navbar { padding-top: env(safe-area-inset-top, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } /* ── Pantallas pequeñas (iPhone SE 320px, Android compactos) ─────────── Cuando el viewport es ≤380px todo se siente apretado. Bajamos uno o dos puntos las fuentes y reducimos paddings laterales agresivamente. Estos overrides usan selectores de etiqueta porque la app usa inline-styles, así que aplicamos por target HTML genérico. Sólo correcciones de comodidad — el layout principal ya lo decide el JSX con useViewport. */ @media (max-width: 380px) { /* Reduce el padding lateral default de section/header/footer. (Inline-styles de JSX siguen ganando por especificidad — esto sólo cubre elementos sin inline styles explícitos.) */ body { font-size: 14px; } /* Asegura tap-targets sin desbordar en pantallas chicas */ button, .tap-target { min-height: 38px; } } /* ── Defensiva global contra OVERFLOW HORIZONTAL en mobile ───────────── Esta es la causa principal de que el hamburguesa se vea "corrido fuera de pantalla": cuando ALGÚN elemento de la página es más ancho que el viewport, el browser crea un viewport efectivo mayor → el navbar fixed se ancla a la derecha del viewport extendido, no del visible. Reglas defensivas: html { overflow-x: hidden } — previene scroll horizontal global img/video/iframe { max-width: 100% } — media nunca desborda p, h1..h6, span { word-wrap: break-word; overflow-wrap: anywhere } — texto largo (emails, URLs) se parte en mobile en lugar de empujar table { max-width: 100% } — tablas con contenido ancho se respetan pre, code { white-space: pre-wrap; word-break: break-word } — bloques de código respetan el ancho Aplicamos solo en mobile/tablet para no afectar layouts desktop intencionalmente anchos (preview del CV, etc.). */ @media (max-width: 1023px) { html, body { overflow-x: hidden; max-width: 100vw; } img, video, iframe, svg, canvas, embed, object { max-width: 100%; height: auto; } p, h1, h2, h3, h4, h5, h6, li, span, a, strong, em, label, td, th { overflow-wrap: anywhere; word-wrap: break-word; } table { max-width: 100%; width: 100%; } pre, code { white-space: pre-wrap; word-break: break-word; } /* Cualquier elemento que use min-width: grande es sospechoso. En particular protegemos contenedores comunes (form, section, aside, article, main) para que NUNCA generen overflow accidental. */ section, article, main, aside, header, footer, form { max-width: 100%; } } /* ── Inputs: previenen el zoom automático de iOS al hacer focus ───────── iOS Safari hace zoom automáticamente si el font-size del input es <16px. Esto rompe la UX (el usuario tiene que pinch-zoom para volver). También aumentamos el min-height a 44px (tap target HIG/Material) y el padding vertical para que los inputs sean cómodos al tipear con el dedo. */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], textarea, select { font-size: 16px !important; min-height: 44px; padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 14px !important; padding-right: 14px !important; border-radius: 10px !important; } textarea { min-height: 88px; /* dos líneas mínimo para que sea cómodo */ line-height: 1.55 !important; } /* Labels arriba de inputs respiran un poco más */ label { font-size: 12.5px; letter-spacing: 0.02em; } /* Submit buttons primarios en formularios — tap target alto */ button[type="submit"] { min-height: 48px; font-size: 15px !important; border-radius: 12px !important; } } /* ── Scrollbars discretas en mobile/tablet (Safari las oculta sola) ── */ @media (max-width: 1023px) { ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; } } /* ── Utilidad: scroll horizontal con snap para chips/tabs ────────────── */ .mobile-hscroll { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-right: -16px; /* fade visual al borde derecho */ } .mobile-hscroll > * { scroll-snap-align: start; flex-shrink: 0; } /* En desktop la utilidad no hace nada — el container vuelve a flex normal. */ @media (min-width: 769px) { .mobile-hscroll { overflow-x: visible; margin-right: 0; } } /* ── Drawer / overlay mobile genérico (lo usa Navbar) ──────────────────── */ /* Z-INDEX MUY ALTO (9000+): el drawer vive como hijo del