/* Coachia PWA — Mobile-first */
:root {
    --primary: #004080;
    --primary-dark: #003060;
    --bg: #f5f6fa;
    --bg-card: #ffffff;
    --text: #2d3436;
    --text-light: #636e72;
    --border: #dfe6e9;
    --success: #00b894;
    --danger: #d63031;
    --warning: #fdcb6e;
    --chat-user: #004080;
    --chat-bot: #ffffff;
    --radius: 16px;
    --radius-sm: 10px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
button { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Screens */
.screen { height: 100%; width: 100%; position: absolute; top: 0; left: 0; }

/* ===== AUTH ===== */
.auth-container {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; padding: 24px;
    background: linear-gradient(135deg, #004080 0%, #336699 100%);
    color: white;
}
.auth-logo { margin-bottom: 8px; }
.auth-logo img { width: 80px; height: 80px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.auth-title { font-size: 32px; font-weight: 800; margin-bottom: 4px; }
.auth-subtitle { font-size: 16px; opacity: 0.85; margin-bottom: 32px; }
.auth-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
    padding: 14px 16px; border: none; border-radius: var(--radius-sm);
    font-size: 16px; background: rgba(255,255,255,0.2); color: white;
    outline: none;
}
.auth-form input::placeholder { color: rgba(255,255,255,0.6); }
.auth-form input:focus { background: rgba(255,255,255,0.3); }
.btn-primary {
    padding: 14px; border: none; border-radius: var(--radius-sm);
    background: white; color: var(--primary); font-size: 16px; font-weight: 700;
    cursor: pointer; transition: transform .1s;
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; }
.btn-secondary {
    padding: 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font-size: 16px; font-weight: 600;
    cursor: pointer;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.auth-error { color: #ff7675; margin-top: 8px; font-size: 14px; text-align: center; min-height: 20px; }
.auth-switch { margin-top: 24px; font-size: 14px; opacity: 0.85; }
.auth-switch a { color: white; font-weight: 700; text-decoration: underline; }

/* ===== ONBOARDING ===== */
.onboarding-container {
    height: 100%; display: flex; flex-direction: column;
    background: linear-gradient(135deg, #004080 0%, #336699 100%); color: white;
    padding: env(safe-area-inset-top, 0px) 0 calc(24px + var(--safe-bottom)) 0;
}
.carousel { flex: 1; position: relative; overflow: hidden; }
.carousel-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 24px; text-align: center;
    transform: translateX(100%); transition: transform .4s ease;
}
.carousel-slide.active { transform: translateX(0); }
.carousel-slide.exit-left { transform: translateX(-100%); }
.slide-icon { font-size: 72px; margin-bottom: 16px; }
.carousel-slide h2 { font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.carousel-slide p { font-size: 16px; opacity: 0.85; margin-bottom: 24px; max-width: 340px; }
.slide-input { width: 100%; max-width: 340px; }
.slide-input label { display: block; font-size: 14px; margin-bottom: 8px; opacity: 0.8; }
.slide-input input, .slide-input textarea {
    width: 100%; padding: 14px 16px; border: none; border-radius: var(--radius-sm);
    font-size: 16px; background: rgba(255,255,255,0.2); color: white; outline: none;
    resize: none; font-family: inherit;
}
.slide-input input::placeholder, .slide-input textarea::placeholder { color: rgba(255,255,255,0.6); }

.sport-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    width: 100%; max-width: 340px; margin-bottom: 12px;
}
.sport-option {
    padding: 11px 8px; border: 2px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.1); color: white; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .2s;
}
.sport-option.selected { background: white; color: var(--primary); border-color: white; }
#onb-sport-extra {
    max-width: 340px; width: 100%; padding: 10px 14px; border: none; border-radius: var(--radius-sm);
    font-size: 15px; background: rgba(255,255,255,0.2); color: white; outline: none; font-family: inherit;
}
#onb-sport-extra::placeholder { color: rgba(255,255,255,0.6); }

.onb-connect-list { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.onb-connect-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(255,255,255,0.15); border-radius: var(--radius-sm);
}
.onb-connect-info { display: flex; flex-direction: column; gap: 2px; }
.onb-connect-name { font-size: 15px; font-weight: 700; color: white; }
.onb-connect-status { font-size: 12px; color: rgba(255,255,255,0.65); }
.onb-connect-status.connected { color: #90ee90; }
.onb-connect-btn-wrap { position: relative; }
.onb-tooltip {
    position: absolute; right: 0; bottom: calc(100% + 8px);
    background: rgba(0,0,0,0.85); color: #fff; font-size: 13px; font-weight: 600;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    animation: onbTooltipIn .25s ease;
    pointer-events: none;
}
.onb-tooltip::after {
    content: ''; position: absolute; top: 100%; right: 14px;
    border: 6px solid transparent; border-top-color: rgba(0,0,0,0.85);
}
@keyframes onbTooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.onb-skip-link {
    background: none; border: none; padding: 0; margin-top: 16px;
    font-size: 13px; color: rgba(255,255,255,0.55); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.onb-skip-link:hover { color: rgba(255,255,255,0.85); }

.carousel-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; }
.carousel-dots { display: flex; gap: 8px; }
.dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.35); transition: background .3s;
}
.dot.active { background: white; width: 24px; border-radius: 5px; }
#onb-next { min-width: 120px; }

/* ===== CREATE PLAN WIZARD ===== */
.create-plan-wizard {
    position: absolute; inset: 0; z-index: 10;
    background: var(--bg, #fff);
    color: var(--text, #1a1a1a);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.cpw-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 10px;
    flex-shrink: 0;
    background: var(--primary); color: #fff;
}
.cpw-back-btn, .cpw-cancel-btn {
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    border-radius: 20px; padding: 6px 14px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
.cpw-back-btn:hover, .cpw-cancel-btn:hover { background: rgba(255,255,255,0.32); }
.cpw-dots { display: flex; gap: 8px; align-items: center; }
.cpw-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.4); transition: all 0.3s;
}
.cpw-dot.active { background: #fff; width: 22px; border-radius: 4px; }

.cpw-slides {
    flex: 1; position: relative; overflow: hidden;
}
.cpw-slide {
    position: absolute; inset: 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; gap: 18px;
}
.cpw-slide.active { transform: translateX(0); }
.cpw-slide.cpw-enter-left { transform: translateX(-100%); }
.cpw-slide.cpw-exit-left { transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.cpw-slide.cpw-exit-right { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

.cpw-slide h2 { font-size: 20px; font-weight: 700; margin: 0 0 2px; color: var(--text, #1a1a1a); }

.cpw-field { display: flex; flex-direction: column; gap: 6px; }
.cpw-field label { font-size: 12px; font-weight: 700; color: var(--text-secondary, #666); text-transform: uppercase; letter-spacing: 0.04em; }
.cpw-field input, .cpw-field select, .cpw-field textarea {
    width: 100%;
    max-width: 100%; /* Fuerza a no desbordar el contenedor */
    min-width: 0; /* Sobrescribe el ancho mínimo nativo en iOS/Flexbox */
    display: block;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border, #e0e0e0);
    font-size: 16px;
    background: var(--bg, #fff);
    color: var(--text, #1a1a1a);
    box-sizing: border-box;
    -webkit-appearance: none; /* Elimina la apariencia por defecto de iOS */
    appearance: none;
}
.cpw-field textarea { resize: none; }

.cpw-quick-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cpw-quick-btn {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm);
    background: var(--bg-secondary, #f4f4f4); border: 1.5px solid var(--border, #e0e0e0);
    color: var(--text, #1a1a1a); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.cpw-quick-btn:hover { background: var(--border, #e0e0e0); }

.cpw-select-cards { display: flex; flex-direction: column; gap: 12px; }
.cpw-select-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-secondary, #f7f7f7); border-radius: 14px;
    padding: 16px 14px; cursor: pointer; transition: background 0.15s, transform 0.1s;
    border: 2px solid var(--border, #e0e0e0);
}
.cpw-select-card:hover { background: var(--border, #e8e8e8); transform: scale(1.01); }
.cpw-select-card-icon { font-size: 28px; flex-shrink: 0; }
.cpw-select-card-text { display: flex; flex-direction: column; gap: 3px; }
.cpw-select-card-title { font-size: 16px; font-weight: 700; color: var(--text, #1a1a1a); }
.cpw-select-card-desc { font-size: 13px; color: var(--text-secondary, #666); }

.cpw-actions { margin-top: auto; padding-top: 16px; }
.cpw-next-btn, .cpw-create-btn {
    width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
    border-radius: var(--radius-sm); background: var(--primary); color: #fff;
    border: none; cursor: pointer; transition: opacity 0.15s;
}
.cpw-next-btn:hover, .cpw-create-btn:hover { opacity: 0.88; }

/* ===== MAIN APP ===== */
#screen-main {
    display: flex; flex-direction: column;
}
.app-header {
    background: var(--primary); color: white; padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.header-brand {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: white; flex: 1;
}
.header-brand:active { opacity: 0.8; }
.header-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.header-title { font-size: 20px; font-weight: 800; }

/* Header nav icons */
.header-actions { display: flex; gap: 3px; }
.header-actions .tab-btn {
    width: 44px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(255,255,255,0.15); cursor: pointer;
    color: rgba(255,255,255,0.85); transition: all .2s; padding: 0;
}
.header-actions .tab-btn.active { background: white; color: var(--primary); }
.header-actions .tab-btn:hover { background: rgba(255,255,255,0.25); }
.nav-icon { font-size: 20px; line-height: 1; }

/* Impersonation bar — shown when admin views another user */
.impersonation-bar {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.impersonation-bar .btn-back {
    border: none; background: rgba(255,255,255,0.2); color: white;
    padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
    white-space: nowrap;
}
.impersonation-bar .btn-back:active { background: rgba(255,255,255,0.35); }
.impersonation-username {
    font-weight: 700; font-size: 16px; color: white; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.bottom-nav {
    display: flex; flex-shrink: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding-bottom: 2px;
}
.bottom-tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 4px 3px;
    border: none; border-radius: 8px; margin: 3px 2px 0;
    background: transparent; cursor: pointer;
    color: var(--text-light); transition: background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
}
.bottom-tab-btn.active { background: rgba(0, 64, 128, 0.09); color: var(--primary); }
.bottom-tab-icon { font-size: 22px; line-height: 1; }
.bottom-tab-label { font-size: 11px; font-weight: 500; }

.tab-content { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.tab-pane {
    position: absolute; inset: 0;
    display: none; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.tab-pane.active { display: flex; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 24px;
}
.modal-card {
    background: white; border-radius: var(--radius); padding: 24px;
    width: 100%; max-width: 360px;
    display: flex; flex-direction: column; gap: 12px;
}
.modal-card h3 { font-size: 18px; font-weight: 700; }
.modal-desc { font-size: 14px; color: var(--text-light); }
.modal-card input {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-size: 16px; outline: none; box-sizing: border-box;
}
.modal-card input:focus { border-color: var(--primary); }
.modal-error { color: var(--danger); font-size: 13px; min-height: 18px; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions .btn-primary { flex: 1; }
.modal-actions .btn-secondary { flex: 1; }

/* ===== CHAT ===== */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 8px;
    -webkit-overflow-scrolling: touch;
}
.msg {
    max-width: 85%; padding: 10px 14px; border-radius: var(--radius);
    font-size: 15px; line-height: 1.5; word-break: break-word;
    animation: msgIn .25s ease;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg-user {
    align-self: flex-end; background: var(--chat-user); color: white;
    border-bottom-right-radius: 4px;
}
.msg-bot {
    align-self: flex-start; background: var(--chat-bot); color: var(--text);
    border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.msg-bot p { margin-bottom: 8px; }
.msg-bot p:last-child { margin-bottom: 0; }
.msg-bot ul, .msg-bot ol { padding-left: 18px; margin-bottom: 8px; }
.msg-bot h1, .msg-bot h2, .msg-bot h3 { margin: 8px 0 4px; font-size: 16px; }
.msg-bot code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.msg-bot pre { background: #f0f0f0; padding: 10px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.msg-time { font-size: 11px; margin-top: 3px; display: block; }
.msg-user .msg-time { text-align: right; color: rgba(255,255,255,0.65); }
.msg-bot .msg-time { text-align: left; color: var(--text-light); }

/* Inline charts in chat */
.chat-chart-wrapper {
    width: min(420px, calc(100vw - 80px));
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0;
    box-shadow: 0 1px 4px rgba(0,64,128,0.08);
}
.chat-chart-wrapper canvas { display: block; height: 220px !important; }
.chat-chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #004080;
    margin-bottom: 8px;
    text-align: center;
}


.chat-input-area { padding: 0 12px 12px; flex-shrink: 0; position: relative; }
.typing-indicator {
    display: flex; gap: 4px; padding: 6px 16px;
    align-self: flex-start;
}
.typing-indicator span {
    width: 8px; height: 8px; background: var(--text-light); border-radius: 50%;
    animation: typing 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

.chat-form {
    display: flex; gap: 6px; background: var(--bg-card); border-radius: var(--radius);
    padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); align-items: flex-end;
}
.chat-form textarea {
    flex: 1; border: none; padding: 10px 12px; font-size: 16px;
    background: transparent; outline: none; color: var(--text);
    font-family: inherit; resize: none; line-height: 1.4;
    max-height: calc(1.4em * 5); overflow-y: auto; min-height: 42px;
}
.btn-send {
    width: 42px; height: 42px; border: none; border-radius: 50%;
    background: var(--primary); color: white; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-send:disabled { opacity: 0.4; }
.btn-analyze-round {
    width: 42px; height: 42px; border: none; border-radius: 50%;
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .15s;
    position: relative;
}
.btn-analyze-round:active { transform: scale(0.9); }
.analyze-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    background: #e74c3c; color: #fff;
    border-radius: 50%; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; line-height: 1; padding: 0 2px;
    pointer-events: none;
}

/* Activity popup notification — tooltip flotante sobre el input */
.activity-popup {
    position: absolute; bottom: calc(100% - 4px); left: 12px; right: 12px; z-index: 100;
    display: flex; align-items: center; gap: 8px;
    background: var(--primary); color: white;
    padding: 10px 14px; border-radius: 12px;
    font-size: 13px; font-weight: 500; animation: slideUp .25s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.activity-popup span { flex: 1; }
.activity-popup-close {
    border: none; background: rgba(255,255,255,0.2); color: white;
    border-radius: 50%; width: 22px; height: 22px; cursor: pointer;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== WEIGHT ===== */
.weight-section { padding: 16px; display: flex; flex-direction: column; }
.weight-chart-wrap { width: 100%; height: 200px; position: relative; margin-bottom: 8px; }
#weight-chart { width: 100% !important; height: 200px !important; }
.weight-prompt {
    background: var(--bg-card); border-radius: var(--radius); padding: 16px;
    margin: 8px 0; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.weight-question { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.weight-form { display: flex; gap: 8px; justify-content: center; }
.weight-form input {
    width: 120px; padding: 10px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 16px; text-align: center; outline: none;
}
.weight-form input:focus { border-color: var(--primary); }

.goal-info {
    background: var(--bg-card); border-radius: var(--radius-sm); padding: 12px 14px;
    margin: 4px 0 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.goal-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.goal-hint { font-size: 13px; color: var(--text-light); }
.goal-hint em { color: var(--primary); font-style: normal; font-weight: 500; }

.mini-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 8px; }
.mini-chat .chat-messages { flex: 1; padding: 8px; min-height: 60px; }
.mini-chat .chat-messages.mini { font-size: 14px; }

/* ===== GOALS / OBJETIVOS ===== */
.goals-section { padding: 16px; }
.goals-add-row { text-align: center; margin-bottom: 16px; }
.goals-add-row .btn-primary { font-size: 15px; padding: 10px 24px; border-radius: var(--radius); border: none; background: var(--primary); color: #fff; cursor: pointer; font-weight: 600; }
.goals-empty { text-align: center; padding: 48px 24px; color: var(--text-light); }
.goals-empty p { margin-bottom: 8px; }

/* Goal cards */
.goal-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 16px;
    margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); position: relative;
}
.goal-card--event { padding: 12px 16px; margin-bottom: 10px; }
.goal-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.goal-card-header h3 { font-size: 16px; font-weight: 700; }
.goal-card-header .goal-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; text-transform: uppercase;
}
.goal-badge-weight { background: #dfe6e9; color: #2d3436; }
.goal-badge-event { background: #0984e3; color: #fff; }
.goal-card-body { font-size: 14px; color: var(--text); }
.goal-card-body .goal-dates { font-size: 13px; color: var(--text-light); margin-top: 6px; }
.goal-card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.goal-card-actions button {
    border: none; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px;
    cursor: pointer; font-weight: 600;
}
.goal-btn-primary { background: var(--primary); color: #fff; }
.goal-btn-danger { background: var(--danger); color: #fff; }
.goal-btn-secondary { background: var(--bg); color: var(--text); }

/* Goal weight chart */
.goal-weight-chart-wrap { width: 100%; height: 150px; position: relative; margin: 10px 0; }
.goal-weight-chart-wrap canvas { width: 100% !important; height: 150px !important; }
.goal-weight-summary { font-size: 13px; color: var(--text-light); text-align: center; margin-bottom: 6px; }

/* Goal event info */
.goal-event-info { display: flex; flex-direction: column; gap: 4px; }
.goal-event-info span { font-size: 14px; }

/* Goals overlay / creation modals */
.goals-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.5);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.goals-create-card {
    background: var(--bg-card); width: 100%; max-width: 500px;
    border-radius: var(--radius) var(--radius) 0 0; padding: 20px 16px calc(20px + var(--safe-bottom));
    max-height: 90vh; overflow-y: auto; overflow-x: hidden; animation: slideUpCard .25s ease;
}
@keyframes slideUpCard {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.goals-create-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.goals-form { display: flex; flex-direction: column; gap: 14px; overflow: visible; }
.goals-field { min-width: 0; }
.goals-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; }
.goals-field input, .goals-field select, .goals-field textarea {
    width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 16px; outline: none; background: #fff; box-sizing: border-box; max-width: 100%; min-width: 0; display: block;
}
.goals-field textarea { resize: none; font-family: inherit; }
.goals-field input:focus, .goals-field select:focus, .goals-field textarea:focus { border-color: var(--primary); }
.goals-quick-btns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.goals-quick-btn {
    border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 20px;
    padding: 6px 14px; font-size: 13px; cursor: pointer; font-weight: 500; white-space: nowrap;
}
.goals-quick-btn:active, .goals-quick-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.goals-check-label {
    display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;
}
.goals-check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.goals-hint { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.goals-textarea {
    width: 100%; min-height: 120px; padding: 10px 12px;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-family: inherit; resize: vertical; outline: none;
}
.goals-textarea:focus { border-color: var(--primary); }
.goals-plan-toggle { display: flex; gap: 0; margin-bottom: 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.goals-plan-toggle-btn {
    flex: 1; padding: 10px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px;
    font-weight: 600; cursor: pointer; text-align: center; transition: all .2s;
}
.goals-plan-toggle-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.goals-form .btn-primary {
    width: 100%; padding: 14px; border: none; border-radius: var(--radius);
    background: var(--primary); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    margin-top: 6px;
}
.goals-type-picker { display: flex; gap: 12px; justify-content: center; padding: 10px 0; }
.goals-type-picker button {
    flex: 1; padding: 20px 10px; border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text); cursor: pointer; text-align: center; font-size: 14px; font-weight: 600;
}
.goals-type-picker button:active { border-color: var(--primary); background: #edf5ff; }
.goals-picker-options { display: flex; gap: 12px; justify-content: center; padding: 10px 0; }
.goals-picker-btn {
    flex: 1; padding: 20px 10px; border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text); cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.goals-picker-btn:active { border-color: var(--primary); background: #edf5ff; }
.goals-picker-icon { font-size: 28px; }
.goals-picker-label { font-size: 14px; font-weight: 600; color: var(--text); }
.goals-create-card--event { max-width: 500px; }
.goals-create-card { max-height: 85vh; overflow-y: auto; }
.goal-card-icon { font-size: 20px; margin-right: 6px; }
.goal-card-title { flex: 1; font-size: 16px; font-weight: 600; }
.goal-card-delete { width: 32px; height: 32px; font-size: 16px; }
.goal-card-actions-header { display: flex; gap: 4px; align-items: center; }
.goal-weight-value { font-weight: 600; font-size: 15px; }
.goal-weight-date { font-size: 13px; color: var(--text-light); margin-left: 8px; }
.goal-create-plan-btn { margin-top: 10px; }
.goal-record-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; justify-content: center; }
.goal-weight-input-inline {
    width: 90px; padding: 8px 10px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 15px; text-align: center; outline: none;
}
.goal-weight-input-inline:focus { border-color: var(--primary); }
.goal-card-date { font-size: 13px; color: var(--text-light); margin-bottom: 4px; }
.btn-secondary { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; cursor: pointer; font-weight: 500; }
.goal-event-date, .goal-event-sport { font-size: 13px; color: var(--text-light); display: block; margin-bottom: 0; }
.goal-event-details { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.goal-progress-wrap { margin-top: 10px; }
.goal-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; color: var(--text-light); font-weight: 600; }
.goal-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.goal-progress-fill { height: 6px; border-radius: 3px; background: var(--primary); transition: width .3s ease; }
.goal-card--fitness { padding: 12px 16px; margin-bottom: 10px; }
.goal-fitness-days { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.goals-create-card--fitness { max-width: 500px; }
.goals-fitness-info {
    background: #edf5ff; border: 1px solid #b3d4f5; border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 13px; color: #1a4a80; margin-bottom: 16px; line-height: 1.4;
}
.goals-field-optional { font-size: 11px; color: var(--text-light); font-weight: 400; }
.session-edit-mode-note {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}
.session-edit-section-list { display: flex; flex-direction: column; gap: 10px; }
.session-edit-empty { font-size: 12px; color: var(--text-light); padding: 6px 0; }
.session-section-card, .session-inner-section-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 10px;
}
.session-inner-section-card { background: #fff; }
.session-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.session-section-delete-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
}
.session-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.session-duration-row { display: flex; gap: 8px; }
.session-duration-row input { flex: 1; }
.session-duration-row select { width: 86px; }
.session-repeat-inner-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
@media (max-width: 480px) {
    .session-section-grid { grid-template-columns: 1fr; }
}
.plan-session-sections { margin: 4px 0 0 0; padding: 0 0 0 16px; font-size: 11px; color: var(--text-light); list-style: disc; }
.plan-food-section { margin: 6px 0 4px; }
.plan-food-meal-label { font-size: 12px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
.plan-food-dishes { margin: 0; padding: 0 0 0 14px; list-style: disc; }
.plan-food-dish { font-size: 11px; color: var(--text-light); margin: 2px 0; }
/* sport-option overrides for wizard (light background) */
.create-plan-wizard .sport-option {
    color: var(--text);
    border-color: var(--border);
    background: var(--bg-card);
}
.create-plan-wizard .sport-option.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
/* event picker inside nutrition wizard */
.cgw-event-picker {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; max-width: 340px; margin-bottom: 12px;
}
.cgw-nutrition-event-option {
    padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text); font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left; transition: all .2s;
    display: flex; flex-direction: column; gap: 2px;
}
.cgw-nutrition-event-option.selected {
    background: var(--primary); color: white; border-color: var(--primary);
}
.cgw-nutrition-event-date { font-size: 12px; font-weight: 400; opacity: 0.8; }
.goal-card-header { display: flex; align-items: center; margin-bottom: 6px; }

/* ===== PLAN ===== */
.plan-section { padding: 16px; display: flex; flex-direction: column; }
.plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.plan-header h2 { font-size: 20px; font-weight: 700; }
.btn-icon {
    width: 36px; height: 36px; border: none; background: var(--bg); color: var(--text); border-radius: 50%;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.plan-content {
    font-size: 15px; line-height: 1.6;
}
.plan-empty-content { text-align: center; padding: 48px 24px; color: var(--text-light); }
.plan-empty-content p { margin-bottom: 16px; }

/* Plan goal header */
.plan-goal-header {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #e04a34 100%);
    color: #fff; border-radius: var(--radius); padding: 14px 16px;
    margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    justify-content: space-between;
}
.plan-goal-icon { font-size: 28px; flex-shrink: 0; }
.plan-goal-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.plan-goal-name { font-size: 17px; font-weight: 700; }
.plan-goal-date { font-size: 13px; opacity: 0.9; }
.plan-goal-target { font-size: 14px; font-weight: 600; }
.plan-goal-actions { display: flex; gap: 4px; flex-shrink: 0; }
.plan-goal-btn { background: rgba(255,255,255,0.2) !important; }
.plan-goal-btn:hover { background: rgba(255,255,255,0.35) !important; }

/* Goal marker inside a plan day */
.plan-goal-marker {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #e04a34 100%);
    color: #fff; border-radius: 10px; padding: 10px 14px;
    margin: 6px 0;
}
.plan-goal-marker .plan-goal-icon { font-size: 22px; flex-shrink: 0; }
.plan-goal-marker .plan-goal-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.plan-goal-marker .plan-goal-name { font-size: 14px; font-weight: 700; }
.plan-goal-marker .plan-goal-target { font-size: 12px; opacity: 0.9; font-weight: 500; }
.plan-goal-action-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.22); border: none;
    font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
}
.plan-goal-action-btn:hover { background: rgba(255,255,255,0.38); }

/* Plan actions row */
.plan-actions-row {
    display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px;
}
.plan-actions-row .plan-goal-btn {
    background: var(--bg) !important; color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px;
    cursor: pointer; font-weight: 500; width: auto; height: auto;
}

/* Plan week wrapper (no white card — just spacing) */
.plan-week-card {
    margin-bottom: 20px;
}
.plan-week-card:last-child { margin-bottom: 0; }
.plan-week-card .plan-week-header {
    font-size: 12px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px; padding: 0; border-bottom: none;
}
.plan-weeks-left { font-weight: 400; font-size: 12px; color: var(--text-light); text-transform: none; }

/* Plan day boxes — white cards (like progreso-week-card) */
.plan-day-box {
    background: #fff; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.plan-day-box:last-child { margin-bottom: 0; }
.plan-day-box--today { background: rgba(0, 184, 148, 0.12); }
.plan-day-header {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: 6px; margin-bottom: 0;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.plan-day-name { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: none; }
.plan-day-date { font-size: 12px; color: var(--text-light); }
.plan-day-relative {
    margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px;
}
.plan-day-relative--today { background: #00b894; color: #fff; }
.plan-day-relative--tomorrow { background: #0984e3; color: #fff; }

/* Plan session items inside day box */
.plan-session-item {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.plan-session-item:last-child { border-bottom: none; }
.plan-session-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.plan-session-sport-icon { font-size: 18px; line-height: 1; align-self: center; }
.plan-session-header { display: flex; align-items: flex-start; gap: 6px; }
.plan-session-header-text { display: flex; flex-direction: column; gap: 1px; }
.plan-session-goal-tag { font-size: 10px; font-weight: 500; color: var(--primary, #4f8ef7); text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; line-height: 1.2; }
.plan-session-title { font-size: 14px; font-weight: 600; }
.plan-session-desc { font-size: 12px; color: var(--text-light); white-space: pre-wrap; }
.plan-session-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 4px; }
.plan-session-edit-btn { opacity: 0.5; font-size: 14px !important; }
.plan-session-edit-btn:hover { opacity: 1; }
.plan-sync-btn {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: 2px 4px;
    border-radius: 4px; line-height: 1;
    min-width: 28px; min-height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.plan-sync-btn:hover:not(:disabled) { opacity: 1; background: var(--border-light, #f0f0f0); }
.plan-sync-btn--loading { cursor: default; }
.plan-sync-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border-light, #ddd);
    border-top-color: var(--primary, #4f8ef7);
    border-radius: 50%;
    animation: plan-spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes plan-spin { to { transform: rotate(360deg); } }

/* Garmin sync first-visit tooltip */
.plan-sync-tooltip {
    position: absolute;
    background: var(--primary, #4f8ef7); color: #fff;
    font-size: 13px; line-height: 1.4;
    padding: 8px 10px 8px 12px;
    border-radius: 8px;
    max-width: 220px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    z-index: 300;
    display: flex; align-items: flex-start; gap: 6px;
    pointer-events: auto;
}
.plan-sync-tooltip::after {
    content: '';
    position: absolute; bottom: -6px; right: 12px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--primary, #4f8ef7);
}
.plan-sync-tooltip-close {
    background: none; border: none; color: rgba(255,255,255,0.8);
    cursor: pointer; font-size: 12px; padding: 0 2px;
    flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.plan-sync-tooltip-close:hover { color: #fff; }

/* Garmin not-connected popup */
.garmin-popup-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
}
.garmin-popup {
    background: var(--bg-card, #fff); border-radius: 12px;
    padding: 20px 24px; max-width: 320px; width: 90%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.garmin-popup p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.garmin-popup-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== SETTINGS ===== */
.settings-section { padding: 16px; overflow-y: auto; }
.settings-section h2 { font-size: 22px; margin-bottom: 20px; }
.settings-group {
    background: var(--bg-card); border-radius: var(--radius); padding: 16px;
    margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.settings-group h3 { font-size: 14px; text-transform: uppercase; color: var(--text-light); margin-bottom: 12px; letter-spacing: 0.5px; }
.setting-item { margin-bottom: 12px; }
.setting-item label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.setting-item input, .setting-item textarea {
    width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm);
    font-size: 15px; outline: none; font-family: inherit; resize: none;
}
.setting-item input:focus, .setting-item textarea:focus { border-color: var(--primary); }
.setting-item.connection { display: flex; justify-content: space-between; align-items: center; }
.connection-name { font-weight: 600; display: block; }
.connection-status { font-size: 13px; color: var(--text-light); }
.connection-status.connected { color: var(--success); }
.settings-error { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 4px; }
.btn-connect-sm {
    padding: 8px 14px; border: 2px solid var(--primary); border-radius: var(--radius-sm);
    background: transparent; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
}
.onboarding-container .btn-connect-sm {
    border-color: white; color: white;
}
.btn-danger {
    width: 100%; padding: 12px; border: none; border-radius: var(--radius-sm);
    background: var(--danger); color: white; font-size: 15px; font-weight: 600; cursor: pointer;
}


/* Loading spinner */
.loading { display: flex; justify-content: center; padding: 20px; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Chat history loading skeleton */
.chat-loading { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.chat-loading-bubble {
    height: 40px; border-radius: 16px; width: 60%;
    background: linear-gradient(90deg, var(--border) 25%, var(--bg-card) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.chat-loading-bot { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-loading-user { align-self: flex-end; border-bottom-right-radius: 4px; background-image: linear-gradient(90deg, #c2d8f0 25%, #d8e8f8 50%, #c2d8f0 75%); background-size: 200% 100%; }
.chat-loading-wide { width: 78%; }
.chat-loading-short { width: 35%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Admin Panel ===== */
.admin-section { display: flex; flex-direction: column; height: 100%; }
.admin-header { padding: 16px 16px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.admin-header h2 { font-size: 18px; font-weight: 700; margin: 0; }
.admin-user-list { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.admin-user-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 12px 14px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.admin-user-info { flex: 1; cursor: pointer; min-width: 0; }
.admin-user-info:hover .admin-user-name { color: var(--primary); }
.admin-user-name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.admin-last-msg { font-size: 12px; color: var(--text-light); }
.admin-badges { display: flex; gap: 4px; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 20px; text-transform: uppercase; }
.badge-telegram { background: #e3f2fd; color: #0277bd; }
.badge-web { background: #e8f5e9; color: #2e7d32; }
.badge-admin { background: #fff3e0; color: #e65100; }
.btn-link-web { white-space: nowrap; flex-shrink: 0;
    padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--primary);
    background: transparent; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-link-web:hover { background: var(--primary); color: white; }

/* Admin chat view → replaced by full user view */
.admin-user-subheader {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    background: var(--bg-card);
}
.btn-back {
    background: none; border: none; cursor: pointer;
    color: var(--primary); font-size: 14px; font-weight: 600; padding: 4px 0; white-space: nowrap;
}
.admin-view-username { font-size: 15px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-view-nav { display: flex; gap: 4px; flex-shrink: 0; }
.admin-tab-btn {
    width: 38px; height: 36px; border-radius: 8px; border: none;
    background: var(--border); cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.admin-tab-btn.active { background: var(--primary); }
.admin-atab-pane { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; flex-direction: column; }
.admin-atab-pane[id="admin-atab-chat"] { display: flex; }
.admin-chat-messages {
    flex: 1; overflow-y: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 8px;
}

.admin-error, .loading-msg { text-align: center; color: var(--text-light); padding: 20px; font-size: 14px; }

/* Chart preferences checkboxes */
.checkbox-item { justify-content: space-between; align-items: center; }
.checkbox-item label { flex: 1; cursor: pointer; }
.checkbox-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.settings-desc { font-size: 13px; color: var(--text-light); margin: -4px 0 8px; }

/* PWA install modal */
.pwa-install-steps ol { margin: 12px 0; padding-left: 20px; }
.pwa-install-steps li { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.pwa-note { font-size: 13px; color: var(--text-light); margin-top: 8px; }

/* Settings version footer */
.settings-version {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 0 4px; margin-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-light); font-size: 12px;
}
.btn-update {
    margin-left: auto;
    background: none; border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 12px; font-size: 12px; color: var(--text-light);
    cursor: pointer; transition: all .2s;
}
.btn-update:hover { border-color: var(--primary); color: var(--primary); }

/* Fullscreen modal (PWA install, chart) */
.modal-fullscreen {
    position: fixed; inset: 0; z-index: 1000;
    background: var(--bg); display: flex; flex-direction: column;
}
.modal-fullscreen-inner {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px; max-width: 600px; margin: 0 auto; width: 100%;
    overflow-y: auto;
}
.modal-fullscreen-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 8px;
}
.modal-fullscreen-header h3 { font-size: 18px; font-weight: 700; flex: 1; }
.btn-modal-close {
    background: none; border: none; font-size: 20px;
    cursor: pointer; color: var(--text-light); padding: 4px;
    line-height: 1; flex-shrink: 0;
}

/* Chart fullscreen — positioned below the app header */
.chart-fullscreen-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: var(--bg);
    display: flex; flex-direction: column;
}
.chart-fullscreen-inner {
    flex: 1; display: flex; flex-direction: column;
    padding: 12px 16px; min-height: 0;
    /* Push content below the app header (56px typical) */
    margin-top: var(--header-height, 56px);
}

.chat-chart-wrapper { cursor: zoom-in; }
.chat-chart-wrapper:hover { opacity: 0.9; }

/* ===== Progreso Section ===== */
.progreso-section {
    padding: 16px; display: flex; flex-direction: column; gap: 20px;
}
.progreso-current-section { padding: 16px 16px 0 16px; }
.progreso-current-week { margin-bottom: 4px; }
.progreso-section-title {
    font-size: 16px; font-weight: 700; color: var(--text);
    margin: 0 0 12px 0;
}
.progreso-current-grid {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.progreso-current-box {
    background: var(--primary-light, #e8f0fe);
    border-radius: 10px; padding: 10px 14px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 90px;
}
.progreso-current-sport { font-weight: 600; font-size: 13px; }
.progreso-current-stats { font-size: 12px; color: var(--text-light); }
.progreso-charts {
    display: flex; flex-direction: column; gap: 16px;
}
.progreso-chart-wrap {
    background: #fff; border-radius: 12px;
    padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: zoom-in;
}
.progreso-chart-wrap:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.progreso-chart-title {
    font-size: 13px; font-weight: 600; color: var(--text-light);
    margin-bottom: 8px;
}
.progreso-chart-wrap canvas { height: 180px !important; }
.progreso-empty {
    text-align: center; color: var(--text-light); padding: 40px 16px;
}
.progreso-weekly-title {
    font-size: 16px; font-weight: 700; color: var(--text);
    margin: 0 0 12px 0;
}
.progreso-week-card {
    background: #fff; border-radius: 12px; padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 10px;
}
.progreso-week-header {
    font-size: 12px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.progreso-week-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;
}
.progreso-week-row:last-child { border-bottom: none; }
.progreso-sport-label { font-weight: 600; min-width: 120px; }
.progreso-sport-stats { color: var(--text-light); }