/* Estilos personalizados para GYM Progress Tracking */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #0b0f19;
    color: #f3f4f6;
}

/* Scrollbars modernos oscuros */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #111827;
}
::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Efectos glassmorphism sutiles */
.glass-panel {
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card {
    background: #131b2e;
    border: 1px solid #1f293d;
    transition: all 0.2s ease-in-out;
}
.glass-card:hover {
    border-color: #3b82f6;
}

.gradient-text-gym {
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-accent {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Transiciones de pestañas */
.tab-content {
    display: none;
    animation: fadeIn 0.25s ease-out forwards;
}
.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alimentación: lectura por día y edición de comidas */
.nutrition-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
.nutrition-date-row label { color: #e2e8f0; font-size: .85rem; font-weight: 700; }
.nutrition-date-row input { color: #fff; background: #0b1220; border: 1px solid #64748b; border-radius: .65rem; padding: .45rem .65rem; color-scheme: dark; }
.nutrition-date-row span { color: #94a3b8; font-size: .75rem; }
.nutrition-day-selector { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.nutrition-day-btn { flex: 0 0 auto; padding: .65rem .9rem; border-radius: .75rem; background: #202b40; color: #cbd5e1; font-size: .875rem; font-weight: 700; border: 1px solid #334155; }
.nutrition-day-btn:hover { background: #2c3c58; }
.nutrition-day-btn.is-active { background: #2563eb; color: white; border-color: #60a5fa; }
.nutrition-macro-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.nutrition-macro-card { min-width: 0; border: 1px solid #334155; background: #101827; border-radius: .9rem; padding: 1rem; }
.nutrition-macro-card span { display: block; color: #cbd5e1; font-size: .8rem; font-weight: 650; margin-bottom: .45rem; }
.nutrition-macro-card strong { display: block; color: #fff; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.2; overflow-wrap: anywhere; }
.nutrition-macro-kcal { border-top: 3px solid #34d399; }
.nutrition-macro-protein { border-top: 3px solid #60a5fa; }
.nutrition-macro-carbs { border-top: 3px solid #fbbf24; }
.nutrition-macro-fat { border-top: 3px solid #fb7185; }
.nutrition-planned-summary { margin-top: .85rem; color: #cbd5e1; font-size: .8rem; line-height: 1.5; }
.nutrition-estimate-notice { margin-top: 1rem; padding: .8rem 1rem; border-radius: .75rem; background: #342717; border: 1px solid #78572b; color: #fde68a; font-size: .8rem; line-height: 1.5; }
.nutrition-meals-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.nutrition-meal-card { min-width: 0; background: #101827; border: 1px solid #334155; border-radius: 1rem; padding: 1.1rem; }
.nutrition-meal-top, .nutrition-meal-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.nutrition-meal-number { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: .65rem; background: #1d4ed8; color: white; font-size: .85rem; font-weight: 800; }
.nutrition-meal-calories { flex: 0 0 auto; color: #a7f3d0; font-size: .9rem; white-space: nowrap; }
.nutrition-meal-status { display: grid; gap: .3rem; justify-items: end; }
.nutrition-meal-status span { color: #94a3b8; font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.nutrition-meal-status span.is-recorded { color: #6ee7b7; }
.nutrition-food-list { display: grid; gap: .35rem; margin: 1rem 0; padding: 0; list-style: none; }
.nutrition-food-list li { position: relative; padding-left: 1rem; color: #e2e8f0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.nutrition-food-list li::before { content: ''; position: absolute; left: 0; top: .62rem; width: .35rem; height: .35rem; background: #60a5fa; border-radius: 50%; }
.nutrition-meal-issues { background: #3a2814; color: #fde68a; border: 1px solid #76552a; border-radius: .65rem; padding: .65rem .8rem; font-size: .75rem; margin-bottom: .9rem; }
.nutrition-meal-issues ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.nutrition-plan-reference { margin-bottom: .8rem; color: #94a3b8; font-size: .75rem; }
.nutrition-plan-reference summary { cursor: pointer; color: #bfdbfe; font-weight: 700; }
.nutrition-plan-reference p { margin-top: .35rem; line-height: 1.5; white-space: pre-line; }
.nutrition-meal-footer { align-items: flex-end; border-top: 1px solid #334155; padding-top: .8rem; flex-wrap: wrap; }
.nutrition-meal-macros { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: #94a3b8; font-size: .75rem; }
.nutrition-meal-macros b { color: #f8fafc; margin-left: .2rem; }
.nutrition-edit-button { color: #bfdbfe; background: #1e3a8a; border: 1px solid #3b82f6; border-radius: .55rem; padding: .5rem .7rem; font-size: .78rem; font-weight: 700; }
.nutrition-edit-button:hover { background: #1d4ed8; color: white; }
.nutrition-meal-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.nutrition-delete-button { color: #fda4af; font-size: .75rem; font-weight: 700; padding: .5rem .25rem; }
.nutrition-edit-form { margin-top: 1rem; border-top: 1px solid #334155; padding-top: 1rem; display: grid; gap: .55rem; }
.nutrition-edit-form.hidden { display: none; }
.nutrition-edit-form label { font-size: .8rem; font-weight: 700; color: #e2e8f0; }
.nutrition-edit-form input, .nutrition-edit-form textarea { width: 100%; background: #0b1220; color: white; border: 1px solid #64748b; border-radius: .55rem; padding: .65rem .75rem; font-size: .9rem; }
.nutrition-edit-form textarea { resize: vertical; line-height: 1.55; }
.nutrition-edit-form p { font-size: .75rem; line-height: 1.5; color: #cbd5e1; }
.nutrition-food-edit-list { display: grid; gap: .5rem; }
.nutrition-food-edit-list.hidden, .nutrition-add-food.hidden, .nutrition-description-editor.hidden { display: none; }
.nutrition-food-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 2rem; gap: .45rem; align-items: end; }
.nutrition-food-edit-row label { min-width: 0; color: #cbd5e1; font-size: .72rem; }
.nutrition-food-edit-row input { margin-top: .25rem; }
.nutrition-food-edit-row button { height: 2.4rem; border-radius: .5rem; color: #fda4af; background: #3b1e2a; font-size: 1.2rem; }
.nutrition-add-food { justify-self: start; color: #bfdbfe; font-size: .8rem; font-weight: 700; padding: .35rem 0; }
.nutrition-text-switch { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.nutrition-text-switch input { width: auto; }
.nutrition-edit-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.nutrition-edit-actions button { padding: .55rem .7rem; border-radius: .55rem; font-size: .8rem; font-weight: 700; background: #334155; }
.nutrition-edit-actions button[type='submit'] { background: #047857; color: white; }
.nutrition-edit-actions button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 850px) { .nutrition-meals-list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nutrition-macro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nutrition-meal-top { align-items: flex-start; } }
/* Pantalla de entrada y selección de perfil */
body.entry-visible > :not(#entry-page):not(#toast-container):not(script) { display: none !important; }
.entry-page[hidden], .entry-page [hidden] { display: none !important; }
.entry-page { min-height: 100svh; padding: 36px max(28px, calc((100vw - 1240px)/2)); background: radial-gradient(ellipse at 10% 65%, #133c443b, transparent 55%), #0a1017; color: #edf5f4; }
.entry-brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em; font-size:24px; }
.entry-logo { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#c7f76b; color:#172417; }
.entry-brand-note { margin-left:auto; color:#829394; font-size:10px; letter-spacing:.2em; font-weight:600; }
.entry-layout { display:grid; grid-template-columns:1.15fr 1fr; gap:100px; align-items:center; min-height:calc(100svh - 150px); padding:50px 0; }
.entry-eyebrow { display:flex; gap:9px; align-items:center; color:#c7f76b; font-size:11px; font-weight:800; letter-spacing:.2em; margin-bottom:22px; }
.entry-eyebrow span { width:7px; height:7px; background:#c7f76b; border-radius:50%; }
.entry-story h1 { font-size:clamp(48px,5.5vw,78px); line-height:1.07; font-weight:800; letter-spacing:-.065em; }
.entry-story h1 em { color:#c7f76b; font-style:normal; }
.entry-description { max-width:390px; color:#9cacab; line-height:1.8; font-size:15px; margin-top:24px; }
.entry-visual { position:relative; height:155px; overflow:hidden; margin:24px 0; }
.entry-orbit { position:absolute; width:270px; height:270px; border:1px solid #c7f76b28; border-radius:50%; top:0; left:24px; }
.entry-orbit.inner { width:210px; height:210px; top:30px; left:54px; border-style:dashed; transform:rotate(-25deg); }
.entry-visual-icon { position:absolute; top:55px; left:122px; color:#c7f76b; }
.entry-visual-icon svg { width:70px; height:70px; }
.entry-visual-label { position:absolute; left:278px; top:95px; color:#748d86; font-size:9px; letter-spacing:.15em; }
.entry-features { display:flex; flex-wrap:wrap; gap:24px; color:#b8c6c3; font-size:11px; }
.entry-features span { display:flex; align-items:center; gap:7px; }
.entry-features svg { width:15px; height:15px; color:#c7f76b; }
.entry-access { background:#121d24; border:1px solid #26383d; border-radius:28px; padding:38px; box-shadow:0 32px 80px #0003; }
.entry-access h2 { font-size:29px; font-weight:800; letter-spacing:-.04em; }
.entry-access-description { color:#93a7a9; font-size:13px; margin:10px 0 28px; line-height:1.6; }
.entry-profiles { display:grid; gap:10px; }
.entry-profile { display:flex; align-items:center; gap:16px; width:100%; padding:17px; border:1px solid #314249; border-radius:16px; background:#19262d; text-align:left; transition:background .2s,border-color .2s,transform .2s; }
.entry-profile:hover { background:#24363b; transform:translateY(-2px); border-color:#789954; }
.entry-profile[aria-pressed="true"] { border-color:#c7f76b; background:#24352d; }
.entry-profile-avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; font-size:21px; font-weight:800; color:white; }
.entry-profile strong { display:block; font-size:15px; }
.entry-profile small { display:block; color:#a1b3b2; margin-top:4px; font-size:11px; }
.entry-profile > svg { width:18px; height:18px; margin-left:auto; color:#adc3ba; }
.entry-form { display:grid; gap:10px; margin-top:24px; }
.entry-form label { color:#cbd9d5; font-size:12px; font-weight:600; }
.entry-form input { width:100%; color:#fff; padding:14px 16px; background:#0c171d; border:1px solid #3d5257; border-radius:12px; outline:none; }
.entry-form input:focus { border-color:#c7f76b; box-shadow:0 0 0 3px #c7f76b15; }
.entry-primary { display:flex; align-items:center; justify-content:center; gap:12px; padding:15px; margin-top:7px; background:#c7f76b; color:#182516; font-size:13px; font-weight:800; border-radius:12px; }
.entry-primary:hover { background:#d7ff90; }
.entry-primary:disabled { opacity:.6; cursor:wait; }
.entry-primary svg { width:17px; height:17px; }
.entry-secondary { color:#c7f76b; font-size:12px; margin-top:15px; text-decoration:underline; text-underline-offset:4px; }
.entry-error { color:#fda4af; font-size:12px; line-height:1.6; margin-top:12px; }
.entry-error:empty { display:none; }
.entry-privacy { display:flex; gap:8px; align-items:center; color:#81989a; font-size:10px; margin-top:26px; }
.entry-privacy svg { width:13px; height:13px; flex-shrink:0; }
.entry-muted { color:#a1b3b2; font-size:13px; line-height:1.7; }
.entry-footer { color:#627a7d; font-size:9px; letter-spacing:.2em; padding-bottom:8px; }
.entry-page button:focus-visible { outline:2px solid #c7f76b; outline-offset:4px; }
@media(max-width:900px) { .entry-layout { gap:36px; grid-template-columns:1fr 1fr; } .entry-access { padding:26px; } .entry-brand-note { display:none; } .entry-visual-label { display:none; } }
@media(max-width:640px) { .entry-page { padding:24px 20px; } .entry-layout { grid-template-columns:1fr; padding:36px 0; gap:32px; } .entry-story h1 { font-size:49px; } .entry-visual { display:none; } .entry-features { margin-top:22px; gap:16px; } .entry-access h2 { font-size:26px; } .entry-access { padding:25px; } .entry-footer { text-align:center; } }
@media(prefers-reduced-motion:reduce) { .entry-profile { transition:none; } .entry-profile:hover { transform:none; } }

/* Panel amplio y tipografía legible en pantallas grandes */
html { font-size: clamp(16px, calc(11px + .35vw), 23px); }
.workspace { max-width: none; padding: clamp(20px, 2vw, 68px); }
.workspace .text-xs { font-size: .875rem; line-height: 1.5; }
.workspace .text-sm { font-size: 1rem; line-height: 1.5; }
.workspace .text-base { font-size: 1.125rem; line-height: 1.5; }
.workspace [class~="text-[10px]"], .workspace [class~="text-[11px]"] { font-size: .8rem; }
.dashboard-weight-chart { height: clamp(280px, 32vh, 460px); }
.dashboard-macros-chart { height: clamp(230px, 27vh, 380px); }
body > header { gap: 1rem; flex-wrap: wrap; }
body > header nav { flex-wrap: wrap; }
@media (max-width: 900px) {
    body > header nav { order: 3; width: 100%; justify-content: center; }
    .workspace { padding: 20px; }
}
@media (max-width: 640px) {
    body > header { padding: 16px; }
    body > header > div:last-child { flex-wrap: wrap; }
    .workspace { padding: 16px; }
    .dashboard-weight-chart { height: 280px; }
    .dashboard-macros-chart { height: 240px; }
}