/* Use only Acme and Secret Agent for the project */ /* Google Fonts import removed from here to avoid render-blocking @import. Fonts are loaded from the document using preconnect + preload and a non-blocking stylesheet load (media="print" onload="this.media='all'"). */ :root { --primary-color: #97f529; /* Neon Green */ --lang-dropdown-width: 260px; /* Standard width for language selector */ --secondary-color: #e848e1; /* Vibrant Pink */ --background-color: #0d0c1d; /* Deep Space Blue */ --card-background: #1a182e; /* Darker Card Blue */ --text-color: #f0f0f0; /* Off-White */ --text-color-dark: #333; --shadow-light: 0 0 15px rgba(151, 245, 41, 0.3), 0 0 5px rgba(151, 245, 41, 0.2); --border-radius: 12px; --font-family-body: 'Acme', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-headings: 'Acme', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-brand: 'Acme', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-accent: 'Secret Agent', 'Brush Script MT', 'Comic Sans MS', cursive; /* Decorative accent font; fallback stack */ /* Local font-face declarations (self-host). Files should be placed in /fonts/ and are expected to be WOFF2. Use font-display: swap to avoid invisible text (FOIT). */ @font-face { font-family: 'Acme'; src: url('/fonts/Acme.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Secret Agent not available via Google Fonts CSS for this family request. Use a cursive fallback for accent text to avoid 404s; if you obtain the SecretAgent font file, add another @font-face here and preload it. */ /* --font-family-accent kept as 'Secret Agent' for project look, but fallback will be used until file is added. */ /* Macro colors with a twist */ --color-proteinas: #00bcd4; /* Cyan */ --color-grasas: #ffeb3b; /* Yellow */ --color-carbohidratos: #e91e63; /* Pink */ } /* General Reset and Body */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Accessibility helpers */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* Stronger focus styles for keyboard users */ *:focus { outline: none; } :focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; } /* Increase CTA hit area for touch devices */ .cta-button { padding: 0.9rem 1.4rem; } body { font-family: var(--font-family-body); color: var(--text-color); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } #starfieldCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Ensure it's behind other content */ background-color: #000; /* Fallback background color */ } .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 20px rgba(151, 245, 41, 0.3); } 50% { box-shadow: 0 0 20px var(--primary-color), 0 0 40px rgba(151, 245, 41, 0.7); } } /* Header */ .header { background-color: transparent; color: white; padding: 2rem 0; text-align: center; border-bottom: 1px solid rgba(151, 245, 41, 0.3); } .header h1 { font-family: var(--font-family-brand); font-size: 3rem; color: var(--primary-color); text-shadow: 0 0 10px var(--primary-color); margin-bottom: 0.5rem; } /* Brand: logo + title alignment */ .brand { display: flex; align-items: center; gap: 1rem; justify-content: center; } .site-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; box-shadow: 0 0 12px rgba(0,0,0,0.4); } @media (max-width: 767px) { .brand { gap: 0.6rem; } .site-logo { width: 40px; height: 40px; } .header h1 { font-size: 2rem; } } /* Extra small screens (very small devices) */ @media (max-width: 420px) { .site-logo { width: 32px; height: 32px; } .header h1 { font-size: 1.6rem; } } /* Main Content Layout */ .main-content { flex-grow: 1; padding: 2rem 0; display: grid; grid-template-columns: 1fr; gap: 2rem; } /* Sections and Cards */ .form-section, .results-section, .recommendations-and-diet-section, .diet-full-width, .intro-section { background-color: var(--card-background); padding: 2rem; border-radius: var(--border-radius); border: 1px solid rgba(151, 245, 41, 0.4); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(26, 24, 46, 0.5); opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s ease-in-out forwards; } .form-section { animation-delay: 0.2s; } .intro-section { animation-delay: 0s; } .results-grid-container { display: grid; grid-template-columns: 1fr; gap: 2rem; animation-delay: 0.4s; } .diet-full-width { animation-delay: 0.6s; } h2, h3 { font-family: var(--font-family-headings); color: var(--primary-color); text-align: center; margin-bottom: 1.5rem; text-shadow: 0 0 5px rgba(151, 245, 41, 0.7); } /* Decorative accents: use Secret Agent sparingly for small labels */ .result-card h3 small, .chart-legend p small { font-family: var(--font-family-accent); font-size: 0.9rem; color: rgba(255,255,255,0.85); } .intro-section h2 { font-size: 1.8rem; } .intro-section p { font-size: 1.1rem; max-width: 800px; margin: 0 auto 1.5rem; text-align: justify; } /* Form Styling */ #nutrition-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .input-group { position: relative; } .input-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--primary-color); } .input-group input, .input-group select { width: 100%; padding: 0.8rem; border: 1px solid rgba(151, 245, 41, 0.5); border-radius: 4px; font-size: 1rem; background-color: #0d0c1d; color: var(--text-color); transition: all 0.3s ease; } .input-group input:focus, .input-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 10px rgba(151, 245, 41, 0.7); } /* Autocomplete styles */ .autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--card-background); border: 1px solid var(--primary-color); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: var(--shadow-light); max-height: 200px; overflow-y: auto; z-index: 1000; } .autocomplete-list-item { padding: 0.8rem; color: var(--text-color); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .autocomplete-list-item:hover { background-color: var(--primary-color); color: var(--background-color); } /* Buttons */ .cta-button { grid-column: 1 / -1; background: var(--primary-color); color: var(--background-color); border: none; padding: 0.7rem 1.2rem; border-radius: 50px; font-size: 1rem; font-weight: bold; font-family: var(--font-family-headings); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 10px var(--primary-color); text-transform: uppercase; } .cta-button:hover { transform: scale(1.05) rotate(-1deg); box-shadow: 0 0 25px var(--primary-color); } /* Results Section */ .result-card { background-color: #0d0c1d; padding: 1.5rem; border-radius: var(--border-radius); text-align: center; border: 1px solid rgba(232, 72, 225, 0.4); } /* Subtle hover and focus animation for cards */ .result-card { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .result-card:focus-within, .result-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 36px rgba(0,0,0,0.55), 0 0 30px rgba(232,72,225,0.06); border-color: rgba(232,72,225,0.6); } .result-card h3 { color: var(--secondary-color); text-shadow: 0 0 5px var(--secondary-color); } .result-value { font-size: 2.5rem; font-weight: bold; color: var(--secondary-color); } .result-value-small { font-weight: bold; color: var(--text-color); } /* Animated number entrance - prefer text-shadow for subtle neon */ .animated-number { display: inline-block; transition: transform 360ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease; will-change: transform, opacity; text-shadow: 0 2px 6px rgba(233,30,99,0.12), 0 1px 0 rgba(255,255,255,0.02); } .animated-number.pulse { /* Use a subtle text-glow pulse instead of a large box halo */ animation: pulse-text 1000ms ease-in-out 1; } @keyframes pulse-text { 0% { text-shadow: 0 2px 6px rgba(233,30,99,0.08), 0 0 0 rgba(151,245,41,0); transform: translateY(0); } 50% { text-shadow: 0 6px 18px rgba(233,30,99,0.18), 0 0 6px rgba(151,245,41,0.06); transform: translateY(-3px) scale(1.02); } 100% { text-shadow: 0 2px 6px rgba(233,30,99,0.08), 0 0 0 rgba(151,245,41,0); transform: translateY(0); } } /* Reveal on scroll: hidden by default then fade/slide into place */ .reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.9,.3,1); will-change: transform, opacity; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Chart pulse: only transform/opacity, no box-shadow to avoid rectangular halo */ .chart-pulse { animation: chart-pop 900ms cubic-bezier(.2,.9,.3,1) 1; } @keyframes chart-pop { 0% { transform: scale(0.995); opacity: 0.98; } 50% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Chart */ .chart-legend .legend-color { width: 1rem; height: 1rem; border-radius: 50%; display: inline-block; } .chart-container { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } #macro-chart { max-width: 250px; max-height: 250px; } .chart-legend { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; } .chart-legend p { display: flex; align-items: center; gap: 0.5rem; font-weight: bold; } /* Recommendations */ #recomendaciones-list { list-style: none; } #recomendaciones-list li { background-color: rgba(0, 188, 212, 0.1); padding: 0.8rem; border-left: 4px solid var(--color-proteinas); margin-bottom: 0.5rem; border-radius: 4px; } /* Table */ .table-container { overflow-x: auto; } #food-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } #food-table thead { background-color: var(--primary-color); } #food-table thead th { color: var(--background-color); font-family: var(--font-family-headings); } #food-table tbody tr:hover { background-color: #2a284d; } #food-table td, #food-table th { padding: 1rem; text-align: left; border-bottom: 1px solid rgba(151, 245, 41, 0.3); } /* Footer */ .footer { background-color: transparent; color: #aaa; text-align: center; padding: 2rem 0; margin-top: auto; border-top: 1px solid rgba(151, 245, 41, 0.3); } .footer a { color: var(--primary-color); } .disclaimer { font-size: 0.75rem; color: #777; margin-top: 1rem; padding: 0.5rem; background-color: #1a182e; border-radius: 4px; } .disclaimer strong { font-size: 0.85rem; color: #aaa; } /* PWA install button in footer */ .pwa-install { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background: transparent; border: none; cursor: pointer; padding: 0.25rem; } .pwa-install img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; /* make image circular */ border: 2px solid rgba(151,245,41,0.18); box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 12px rgba(151,245,41,0.06); transition: transform 180ms ease, box-shadow 180ms ease; } .pwa-install:hover img, .pwa-install:focus img { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 18px rgba(151,245,41,0.18); } .pwa-install span { font-size: 0.9rem; color: var(--primary-color); } /* Wrapper and legend for PWA install block in footer */ .pwa-install-wrapper { display: inline-flex; align-items: center; gap: 0.75rem; justify-content: center; margin: 0.5rem 0; flex-direction: column; /* legend above image */ } .pwa-install-legend { color: var(--primary-color); font-weight: 700; font-family: var(--font-family-headings); font-size: 0.95rem; text-transform: none; margin-bottom: 0.25rem; /* small gap above image */ } /* Footer link row: privacy + social icon */ .footer-links { display: inline-flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } .footer-links a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); text-decoration: none; font-weight: 600; } .footer-links a svg { width: 20px; height: 20px; fill: currentColor; vertical-align: middle; } .footer-links a#facebook-link { gap: 0.4rem; } .footer-links a#privacy-link { padding-right: 0.25rem; } /* Footer bottom layout: align copyright left and links right on wide screens */ .footer-bottom { display: flex; align-items: center; justify-content: center; flex-direction: column; /* stack text then social icon */ gap: 0.5rem; margin-top: 0.5rem; } .footer-text { color: #bbb; font-size: 0.95rem; text-align: center; } /* On all screen sizes the footer bottom is centered; keep stacking behavior */ @media (max-width: 600px) { .footer-bottom { flex-direction: column; align-items: center; text-align: center; } .footer-text { order: 1; } .footer-links { order: 2; } } /* Social icon placed beside footer text */ .footer-social { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-social a { color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; } .footer-social svg { width: 20px; height: 20px; fill: currentColor; } /* Center the privacy paragraph and footer links */ .footer-links { justify-content: center; } p a#privacy-link { color: var(--primary-color); font-weight: 600; text-decoration: none; } .footer { text-align: center; } @media (max-width: 600px) { .pwa-install img { width: 46px; height: 46px; } .pwa-install-legend { font-size: 0.9rem; } .pwa-install-wrapper { gap: 0.5rem; } } /* Switches & Toggles */ .unit-toggle-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; } .unit-toggle-group label { font-weight: bold; } .unit-toggle-switch { display: flex; background-color: #0d0c1d; border-radius: 20px; position: relative; overflow: hidden; border: 1px solid var(--primary-color); } .unit-toggle-switch input[type="radio"] { display: none; } .unit-toggle-switch label { padding: 0.5rem 1rem; cursor: pointer; z-index: 1; font-weight: bold; color: var(--primary-color); transition: color 0.3s; } .unit-toggle-switch input[type="radio"]:checked + label { color: #0d0c1d; background-color: var(--primary-color); transition: background-color 0.3s ease-in-out; } .switch-group { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; } .switch-group input[type="checkbox"] { position: relative; width: 3.5rem; height: 2rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #333; outline: none; border-radius: 2rem; cursor: pointer; transition: background-color 0.3s ease; } .switch-group input[type="checkbox"]:checked { background: var(--primary-color); } .switch-group input[type="checkbox"]::before { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.5rem; height: 1.5rem; background: #fff; border-radius: 50%; transition: transform 0.3s ease; } .switch-group input[type="checkbox"]:checked::before { transform: translateX(1.5rem); } /* Other minor adjustments */ .hidden { display: none !important; } .warning-alert { background-color: rgba(255, 235, 59, 0.1); color: #ffeb3b; padding: 1rem; border-left: 5px solid #ffeb3b; border-radius: 4px; margin-top: 1rem; animation: fadeIn 0.5s ease; } .global-error-message { padding: 1rem; background-color: #fce8e6; color: #d93025; border: 1px solid #d93025; border-radius: var(--border-radius); margin-bottom: 2rem; text-align: center; } .faq-question { cursor: pointer; padding: 1rem; border-bottom: 1px solid #ddd; position: relative; font-weight: bold; color: var(--primary-color); } .faq-question::after { content: "+"; position: absolute; right: 1rem; font-size: 1.5rem; top: 50%; transform: translateY(-50%); color: var(--secondary-color); pointer-events: none; transition: transform 0.3s; } .faq-question.active::after { transform: translateY(-50%) rotate(45deg); } .faq-answer { padding: 1rem; background-color: #1f1f3d; border-left: 3px solid var(--secondary-color); display: none; overflow: hidden; } .guide-article { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background-color: #1f1f3d; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); margin-bottom: 2rem; } .language-selector { position: relative; display: inline-block; } /* Enhanced language selector */ .language-selector { display: inline-flex; align-items: center; gap: 0.6rem; } .language-flag { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)); border: 1px solid rgba(255,255,255,0.03); font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .language-flag .fi { font-size: 18px; line-height: 1; } .language-flag img { width: 100%; height: auto; display: block; } .language-flag img { border-radius: 4px; } .language-label { color: var(--text-color); font-weight: 600; font-size: 0.95rem; } #idioma { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; color: var(--text-color); padding: 0.5rem 2.2rem 0.5rem 0.8rem; border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; font-size: 0.95rem; cursor: pointer; min-width: 180px; background-image: linear-gradient(0deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); } .language-selector::after { display: none; } /* Ensure select fits nicely next to the flag */ .language-selector .language-inner { position: relative; display: inline-block; } .language-selector select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Attempt to style native option elements; limited by browser defaults. */ #idioma option { padding: 0.6rem 0.8rem; background: var(--card-background); color: var(--text-color); } #idioma optgroup { color: var(--primary-color); } /* Make the select visually integrate with the page: slight inset and glow on focus */ #idioma:focus { outline: none; box-shadow: 0 0 12px rgba(151,245,41,0.12); border-color: var(--primary-color); } /* When the select is focused/open, hide the outside flag to prevent duplication */ .language-selector.open .language-flag { opacity: 0; transform: translateY(-4px) scale(0.95); pointer-events: none; } .language-selector .language-flag, .language-selector .language-label { transition: all 180ms ease; } @media (max-width: 600px) { .language-flag { width: 30px; height: 30px; font-size: 1rem; } #idioma { min-width: 130px; } } /* Responsive Design */ @media (min-width: 992px) { .main-content { grid-template-columns: 1fr 1fr; } .form-section { grid-column: 1 / 2; } .results-grid-container { grid-column: 2 / 3; } .diet-full-width, .intro-section { grid-column: 1 / -1; } } @media (min-width: 768px) and (max-width: 991px) { .chart-container { flex-direction: row; justify-content: center; gap: 2rem; } .chart-legend { justify-content: center; } } /* Custom styles for input and select width standardization */ .input-group input, .input-group select { width: 100%; box-sizing: border-box; } #idioma { /* For the language selector */ width: 100%; box-sizing: border-box; } /* Custom dropdown styles (replaces outer flag visual) */ .custom-lang-dropdown { position: relative; display: inline-block; z-index: 1000; } .custom-lang-button { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; border-radius: 10px; background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border: 1px solid rgba(255,255,255,0.05); color: var(--text-color); cursor: pointer; width: var(--lang-dropdown-width); box-sizing: border-box; position: relative; z-index: 100001; } .custom-lang-button:focus { outline: none; box-shadow: 0 0 12px rgba(151,245,41,0.12); } .custom-lang-flag { width: 32px; height: 22px; display: inline-block; line-height: 1; font-size: 18px; flex: 0 0 32px; } .custom-lang-flag img { width: 32px; height: 22px; object-fit: cover; border-radius: 4px; } .custom-lang-label { font-weight: 600; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-lang-button .chev { flex: 0 0 22px; width: 22px; text-align: center; margin-left: 6px; color: var(--primary-color); font-size: 14px; line-height: 1; } .custom-lang-list { position: absolute; top: calc(100% + 6px); left: 0; background: var(--card-background); border: 1px solid rgba(151,245,41,0.12); box-shadow: var(--shadow-light); border-radius: 10px; padding: 0.4rem; max-height: 240px; overflow-y: auto; z-index: 99999; width: var(--lang-dropdown-width); box-sizing: border-box; /* start hidden but animatable */ visibility: hidden; opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; pointer-events: none; } .custom-lang-list.open { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .custom-lang-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; cursor: pointer; border-radius: 6px; color: var(--text-color); width: 100%; box-sizing: border-box; } .custom-lang-list, .custom-lang-item { pointer-events: auto; } .custom-lang-item[aria-selected="true"] { background: rgba(151,245,41,0.08); } .custom-lang-item:focus, .custom-lang-item:hover { background: rgba(151,245,41,0.12); outline: none; } .custom-lang-item .item-flag { width: 32px; height: 22px; flex: 0 0 32px; } .custom-lang-item .item-flag img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .custom-lang-item .item-label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 52px); flex: 1 1 auto; } /* Apply standardized fixed width to visible button and hidden native select for consistency */ .custom-lang-button, #idioma { width: var(--lang-dropdown-width); box-sizing: border-box; } /* Ensure the dropdown aligns horizontally with the button */ .custom-lang-list { left: 0; transform-origin: top left; } /* Hide native select but keep for accessibility; visually-hidden class already exists */ .visually-hidden.select-keep { position: absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #food-search-input { padding: 0.8rem; border: 1px solid rgba(151, 245, 41, 0.5); border-radius: 4px; font-size: 1rem; background-color: #0d0c1d; color: var(--text-color); transition: all 0.3s ease; width: 100%; box-sizing: border-box; } #food-search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 10px rgba(151, 245, 41, 0.7); } .source-item h4 { font-family: var(--font-family-headings); color: yellow; text-shadow: none; } .source-item h4 a { color: #f9e009; text-shadow: none; } /* Pagination Controls */ .pagination-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .pagination-controls .pagination-icon-button { min-width: 40px; } .pagination-controls #page-info { /* flex-grow: 1; */ text-align: center; /* min-width: 100px; */ /* Adjust as needed */ } .pagination-icon-button { background: none; border: none; padding: 0.5rem; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; transition: color 0.3s ease, transform 0.3s ease; } .pagination-icon-button:hover { color: var(--secondary-color); transform: scale(1.2); } #food-table th:nth-child(1) { width: 50%; /* Nombre */ } #food-table th:nth-child(2) { width: 25%; /* Cantidad */ } #food-table th:nth-child(3) { width: 25%; /* Calorías (kcal) */ } /* ========================= Responsive improvements - Improve stacking on small screens - Make typography and chart scale fluidly - Reduce paddings and optimize form grid - Provide a simple table stacking fallback ========================= */ :root { /* fluid base font size for better scaling */ --base-font-size: 16px; } html { font-size: var(--base-font-size); } /* Force project-wide font to Acme (body variable) */ html, body, #root, .container { font-family: var(--font-family-body) !important; } /* Ensure form controls inherit the same font (some browsers use native UI fonts) */ input, textarea, select, button { font: inherit; /* inherit size, weight and family */ font-family: inherit !important; } /* Ensure code/pre keep monospace when necessary */ code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; } /* Use clamp for headings to scale between small and large screens */ .header h1 { font-size: clamp(1.6rem, 2.8vw + 1rem, 3rem); } /* Slightly narrower max-width on very large screens */ .container { max-width: 1100px; } /* Make form fields more compact on small screens */ @media (max-width: 600px) { .container { padding: 0 0.75rem; } .form-section, .results-section, .diet-full-width, .intro-section { padding: 1rem; } #nutrition-form { grid-template-columns: 1fr; gap: 1rem; } .unit-toggle-group { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .brand { flex-direction: column; gap: 0.4rem; } .site-logo { width: 36px; height: 36px; } .header h1 { text-align: center; } .cta-button { padding: 0.9rem; font-size: 0.95rem; } /* Chart: allow full width but cap height */ #macro-chart { width: 100% !important; max-width: 320px; height: auto !important; } .chart-container { gap: 1rem; } .chart-legend { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } /* Table fallback: let it be horizontally scrollable but increase readability */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } #food-table td, #food-table th { padding: 0.75rem; font-size: 0.95rem; } } @media (min-width: 601px) and (max-width: 991px) { .container { padding: 0 1rem; } /* keep two-column layout for content but make form fields adapt */ .main-content { grid-template-columns: 1fr; } #nutrition-form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .chart-container { flex-direction: row; align-items: center; } } /* Desktop: keep the two-column layout but give results area a little more room */ @media (min-width: 992px) { .container { max-width: 1200px; } .main-content { grid-template-columns: 1fr 1.05fr; } .form-section { padding: 2rem; } .results-grid-container { gap: 1.75rem; } } /* Improve accessibility of inputs on small touch devices */ input[type="number"], input[type="text"], select { font-size: 1rem; } /* Convert table rows into stacked cards on very small screens for readability */ @media (max-width: 420px) { #food-table thead { display: none; } #food-table, #food-table tbody, #food-table tr, #food-table td { display: block; width: 100%; } #food-table tr { margin-bottom: 0.75rem; background: #121125; border-radius: 8px; padding: 0.5rem; border: 1px solid rgba(151,245,41,0.08); } #food-table td { padding: 0.5rem 0.6rem; border: none; display: flex; justify-content: space-between; align-items: center; } #food-table td::before { content: attr(data-label); color: rgba(255,255,255,0.7); font-weight: 600; margin-right: 0.5rem; } #food-table td span { display: inline-block; text-align: right; } /* Make export button full width and easy to tap */ #export-csv-btn { width: 100%; display: block; } }