* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #333;
    overflow-x: hidden;
}
.login-container { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; }
.login-box { background:white; padding:40px; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:420px; }
.login-box h1 { text-align:center; margin-bottom:20px; color:#667eea; font-size:28px; }
.login-box input { width:100%; padding:14px; margin-bottom:12px; border:2px solid #e0e0e0; border-radius:10px; font-size:16px; }
.login-box button { width:100%; padding:14px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border:none; border-radius:10px; font-size:18px; font-weight:700; cursor:pointer; }
.login-links { display:flex; justify-content:space-between; font-size:13px; margin-top:8px; }
.login-links a { color:#667eea; text-decoration:none; cursor:pointer; }
.app-container { display:none; min-height:100vh; background:#f5f5f5; }
.header { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:12px 16px; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,.1); }
.header-compact { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap; }
.week-controls { flex:1 1 70%; max-width:70%; min-width:0; display:flex; gap:8px; align-items:center; justify-content:space-between; }
.user-dropdown { flex:1 1 30%; max-width:30%; min-width:120px; display:flex; justify-content:flex-end; position:relative; }
.week-pill { background:rgba(255,255,255,0.15); padding:6px 16px; border-radius:999px; font-weight:600; flex:1; text-align:center; }
.user-trigger {
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.15);
    color:white;
    border:1px solid rgba(255,255,255,0.3);
    padding:8px 12px;
    border-radius:999px;
    font-weight:600;
    cursor:pointer;
    width:100%;
    justify-content:space-between;
}
.user-trigger .user-caret { transition:transform .2s ease; font-size:12px; }
.user-trigger .user-caret.open { transform:rotate(180deg); }
.user-menu {
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    background:white;
    color:#333;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.18);
    padding:8px 0;
    min-width:180px;
    display:none;
    z-index:120;
}
.user-menu.open { display:block; }
.user-menu-item {
    width:100%;
    background:none;
    border:0;
    text-align:left;
    padding:10px 16px;
    font-size:14px;
    cursor:pointer;
    display:block;
    color:#333;
}
.user-menu-item:hover { background:#eef2ff; }
.icon-btn { background:rgba(255,255,255,0.15); color:white; border:1px solid rgba(255,255,255,0.3); padding:8px 12px; border-radius:10px; cursor:pointer; }
.day-selector { padding:12px 16px; background:white; box-shadow:0 2px 5px rgba(0,0,0,.05); }
.section-selector { padding:12px 16px; background:white; box-shadow:0 2px 5px rgba(0,0,0,.05); margin-bottom:12px; }
.section-buttons { display:grid; grid-template-columns:repeat(3, minmax(110px, 1fr)); gap:10px; }
.section-btn { padding:12px 0; background:white; border:2px solid #d6dbff; color:#5a63c9; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; transition:all .2s ease; text-align:center; }
.section-btn.active { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border-color:transparent; box-shadow:0 6px 12px rgba(102,126,234,0.25); }
.section-btn:not(.active):hover { border-color:#aab4ff; color:#3943c6; }
.hidden { display:none !important; }
.info-card { border-left:4px solid #667eea; }
.section-heading { font-size:18px; font-weight:800; color:#333; margin-bottom:6px; }
.section-subheading { font-size:13px; color:#666; margin-bottom:12px; }
.mobility-card { border-left:4px solid #43a047; }
.nutrition-card { border-left:4px solid #fb8c00; }
.card-title { font-size:16px; font-weight:800; color:#333; margin-bottom:6px; }
.card-focus { display:inline-flex; align-items:center; gap:6px; background:#e8f5e9; color:#2e7d32; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; margin-bottom:8px; }
.card-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:#555; margin-top:10px; }
.card-list { margin-top:10px; padding-left:18px; font-size:13px; color:#555; line-height:1.5; }
.card-list li + li { margin-top:6px; }
.resource-link { margin-top:12px; display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:#0d47a1; text-decoration:none; gap:6px; }
.resource-link:hover { text-decoration:underline; }
.section-note { margin-top:14px; font-size:12px; color:#555; border-left:3px solid #d0d7ff; padding-left:10px; }

.day-buttons { display:grid; grid-template-columns:repeat(3, minmax(90px, 1fr)); gap:10px; }
.day-btn { padding:12px 0; background:white; border:2px solid #667eea; color:#667eea; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; text-align:center; }
.day-btn.active { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border-color:transparent; }
.exercises-container { padding:16px; max-width:1100px; margin:0 auto; }
.exercise-card { background:white; border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 4px 6px rgba(0,0,0,.07); }
.exercise-header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.exercise-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
.exercise-name { font-size:18px; font-weight:800; color:#333; }
.exercise-info { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:#555; }
.muscle-tag { background:#e8f5e9; color:#2e7d32; padding:3px 10px; border-radius:999px; font-weight:600; }
.rest-tag { background:#fff3e0; color:#ef6c00; padding:3px 10px; border-radius:999px; font-weight:600; }
.video-link { background:#e3f2fd; color:#0d47a1; padding:8px 12px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600; }
.alt-btn { background:#ede7f6; color:#5e35b1; padding:8px 12px; border:0; border-radius:10px; font-weight:700; cursor:pointer; }
.reset-btn {
    background:#fff8e6;
    color:#c77800;
    border:1px solid rgba(199,120,0,0.35);
    padding:8px 12px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.reset-btn:hover { background:#ffe7b8; }
.sets-container { display:grid; gap:12px; }
.set-row {
    display:grid;
    grid-template-columns:minmax(120px, 0.8fr) repeat(2, minmax(0, 1fr));
    gap:12px;
    align-items:center;
    background:#f8f9fa;
    border-radius:12px;
    padding:12px;
}
.set-label {
    font-weight:800;
    color:#667eea;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}
.set-label .target-badge {
    margin-left:auto;
}

.target-badge {
    align-self:center;
    background:#e0f7fa;
    color:#006064;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.input-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.input-label { font-size:12px; color:#666; font-weight:600; }
.input-wrapper { position:relative; display:flex; flex-direction:column; gap:4px; align-items:center; }
input[type=number] { width:100%; padding:12px; border:2px solid #e0e0e0; border-radius:10px; font-size:18px; font-weight:800; text-align:center; min-height:48px; }
input[type=number]:focus { outline:none; border-color:#667eea; background:white; }
.comparison { font-size:11px; color:#666; text-align:center; min-height:1.2em; }
.comparison.better { color:#4caf50; font-weight:800; }
.comparison.worse { color:#f44336; font-weight:700; }
.footer-spacer { height:24px; }
.modal { position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.45); padding:12px; z-index:1000; }
.modal-content { background:white; padding:20px; border-radius:16px 16px 0 0; width:100%; max-width:960px; max-height:85vh; overflow:auto; position:relative; box-shadow:0 -10px 30px rgba(0,0,0,.25); }
.modal-close { position:absolute; top:10px; right:10px; background:#eee; border:0; border-radius:50%; width:32px; height:32px; cursor:pointer; }
.stats-grid { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 700px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.modal-content { max-width: 960px; }
.stat-card { padding:12px; background:#f8f9fa; border-radius:12px; border-left:4px solid #667eea; }
.stat-card h3 { color:#667eea; margin-bottom:8px; font-size:16px; }
.progress-bar { height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; margin:6px 0; }
.progress-fill { height:100%; background:linear-gradient(90deg,#667eea,#764ba2); width:0%; transition:width .3s; }
@media (max-width:768px) {
    .header-compact { flex-wrap:nowrap; gap:8px; }
    .week-controls { flex:1 1 70%; max-width:70%; }
    .user-dropdown { flex:1 1 30%; max-width:30%; }
}
@media (max-width:640px) {
    .section-buttons { gap:8px; grid-template-columns:repeat(3, minmax(90px, 1fr)); }
    .section-btn { font-size:15px; }

    .day-selector { padding:10px 12px; }
    .day-buttons { gap:8px; }
    .day-btn { font-size:15px; }
    .exercise-actions { width:100%; justify-content:space-between; }
    .exercise-actions .alt-btn,
    .exercise-actions .video-link,
    .exercise-actions .reset-btn { flex:1 1 calc(50% - 4px); text-align:center; }
    .set-row { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .set-label { grid-column:1 / -1; }
}
.user-menu .file-item {
    position:relative;
    cursor:pointer;
}
.user-menu .file-item input[type=file] {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.menu-separator {
    border:0;
    border-top:1px solid #e5e7ff;
    margin:6px 0;
}

/* Tabla de nutrición responsive */
.nutrition-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.nutrition-table thead tr {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.nutrition-table th {
    padding: 12px;
    text-align: center;
    font-weight: 700;
}

.nutrition-table th:first-child {
    text-align: left;
    border-radius: 8px 0 0 0;
}

.nutrition-table th:last-child {
    border-radius: 0 8px 0 0;
}

.nutrition-table tbody tr {
    background: #ffffff;
}

.nutrition-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.nutrition-table td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.nutrition-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.nutrition-table .total-row {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white;
    font-weight: bold;
}

.nutrition-table .total-row td:first-child {
    border-radius: 0 0 0 8px;
}

.nutrition-table .total-row td:last-child {
    border-radius: 0 0 8px 0;
}

/* Responsive: Tablets y móviles grandes */
@media (max-width: 768px) {
    .nutrition-table {
        font-size: 0.9em;
    }

    .nutrition-table th,
    .nutrition-table td {
        padding: 8px 6px;
    }
}

/* Responsive: Móviles pequeños */
@media (max-width: 640px) {
    .nutrition-table {
        font-size: 0.8em;
    }

    .nutrition-table th,
    .nutrition-table td {
        padding: 6px 4px;
    }

    .nutrition-table th {
        font-size: 0.85em;
    }
}

/* Responsive: Móviles muy pequeños */
@media (max-width: 480px) {
    .nutrition-table {
        font-size: 0.75em;
    }

    .nutrition-table th,
    .nutrition-table td {
        padding: 5px 2px;
    }

    /* Abreviar los headers en pantallas muy pequeñas */
    .nutrition-table th:nth-child(2)::before { content: 'Kcal'; }
    .nutrition-table th:nth-child(2) { font-size: 0; }

    .nutrition-table th:nth-child(3)::before { content: 'Prot'; }
    .nutrition-table th:nth-child(3) { font-size: 0; }

    .nutrition-table th:nth-child(4)::before { content: 'HC'; }
    .nutrition-table th:nth-child(4) { font-size: 0; }

    .nutrition-table th:nth-child(5)::before { content: 'Grasas'; }
    .nutrition-table th:nth-child(5) { font-size: 0; }

    .nutrition-table th::before {
        font-size: 11px;
    }
}