/* ═══════════════════════════════════════════════════════════
   WEEKLY PLANNER — Premium Light
   ═══════════════════════════════════════════════════════════ */
.planner-section {
    padding: 20px 24px;
    background: var(--offwhite);
    min-height: 100vh;
    font-size: 1rem;
}
.planner-header { margin-bottom: 6px; }
.planner-header h1 {
    font-size: var(--app-page-title-size);
    font-weight: 800;
    color: var(--gold);
    margin: 0;
}

/* ── Controls ── */
.planner-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.controls-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.view-switch {
    display: inline-flex;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
    flex-shrink: 0;
}
.view-btn {
    border: none;
    padding: 6px 14px;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--app-button-font-size);
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.view-btn:hover { background: rgba(201,168,76,0.08); color: var(--gray-600); }
.view-btn.active {
    background: var(--gold);
    color: var(--charcoal);
}
.period-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.nav-arrow {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-weight: 400;
    line-height: 1;
}
.nav-arrow:hover { border-color: var(--gold); color: var(--gold); }
.period-label {
    font-weight: 600;
    color: var(--gray-600);
    font-size: var(--app-button-font-size);
    min-width: 120px;
    text-align: center;
    padding: 0 4px;
}
.nav-today {
    padding: 5px 12px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--app-button-font-size);
    font-weight: 600;
    color: var(--gray-500);
    transition: var(--transition);
    margin-left: 2px;
}
.nav-today:hover { border-color: var(--gold); color: var(--gold); }
.controls-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.controls-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}
.action-separator {
    width: 1px;
    height: 22px;
    background: rgba(201,168,76,0.15);
    margin: 0 2px;
    flex-shrink: 0;
}
.action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.action-dropdown-group {
    position: relative;
}
.bulk-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin-top: 4px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 1000;
    min-width: 140px;
}
.bulk-actions-menu .action-btn {
    margin: 0;
    width: 100%;
    justify-content: center;
}
.bulk-menu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gray-200);
}
.action-label {
    font-size: var(--app-label-font-size);
    color: var(--gray-500);
    font-weight: 600;
}
.action-select {
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: var(--app-control-font-size);
    font-family: var(--font);
    background: var(--gray-100);
    color: var(--gray-600);
}
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--app-button-font-size);
    font-weight: 600;
    color: var(--gray-500);
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}
.action-btn:hover { border-color: var(--gold); color: var(--gold); }
.action-btn-primary {
    background: var(--gold);
    color: var(--charcoal);
    border-color: var(--gold);
}
.action-btn-primary:hover {
    background: var(--gold-light);
    color: var(--charcoal);
    border-color: var(--gold-light);
}

/* ── Bulk delete dropdown ── */
.bulk-delete-wrap { position: relative; display: inline-flex; }
.bulk-delete-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 200;
    overflow: hidden;
}
.bulk-delete-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 12px 6px;
}
.bulk-delete-choice-row {
    display: flex;
    gap: 6px;
    padding: 0 10px 8px;
}
.bulk-delete-choice {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}
.bulk-delete-choice:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.bulk-delete-choice.active {
    background: rgba(201,168,76,0.14);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.bulk-delete-apply {
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 9px 10px;
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 8px;
    text-align: center;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--charcoal);
    cursor: pointer;
    transition: var(--transition);
}
.bulk-delete-apply:hover:not(:disabled) {
    background: var(--gold-light);
}
.bulk-delete-apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.bulk-delete-menu button:not(.bulk-delete-choice):not(.bulk-delete-apply) {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s;
}
.bulk-delete-menu button:not(.bulk-delete-choice):not(.bulk-delete-apply):hover { background: rgba(201,168,76,0.08); color: var(--gold); }
.bulk-delete-menu button:not(.bulk-delete-choice):not(.bulk-delete-apply) + button:not(.bulk-delete-choice):not(.bulk-delete-apply) { border-top: 1px solid var(--gray-100); }

#bulk-delete-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-right: 34px;
    overflow: visible;
}

#bulk-delete-btn .bulk-delete-btn-label {
    display: inline-flex;
    align-items: center;
}

#bulk-delete-btn .bulk-delete-btn-status {
    position: absolute;
    right: 7px;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(201,168,76,0.5);
    background: #ffffff;
    color: var(--gray-500);
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
    transition: opacity .2s ease, transform .2s ease;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    pointer-events: none;
    z-index: 2;
}

#bulk-delete-btn .bulk-delete-btn-status::before,
#bulk-delete-btn .bulk-delete-btn-status::after {
    content: '';
    position: absolute;
    display: block;
}

#bulk-delete-btn .bulk-delete-btn-status.show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

#bulk-delete-btn.is-loading .bulk-delete-btn-status {
    color: #8a6720;
    border-color: rgba(138,103,32,0.45);
    background: #fff8e6;
}

#bulk-delete-btn.is-success .bulk-delete-btn-status {
    color: #16a34a;
    border-color: rgba(22,163,74,0.35);
    background: #f0fdf4;
}

#bulk-delete-btn .bulk-delete-btn-status.loading::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(138,103,32,0.22);
    border-top-color: #8a6720;
    animation: bulkDeleteSpin .75s linear infinite;
}

#bulk-delete-btn .bulk-delete-btn-status.success::before {
    width: 8px;
    height: 4px;
    border-left: 2px solid #16a34a;
    border-bottom: 2px solid #16a34a;
    transform: rotate(-45deg) translate(1px, -1px);
}

@keyframes bulkDeleteSpin {
    from { transform: translateY(-50%) rotate(0deg) scale(1); }
    to { transform: translateY(-50%) rotate(360deg) scale(1); }
}

/* ── Summary Bar ── */
.planner-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.summary-card {
    background: var(--white);
    padding: 10px 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(201,168,76,0.12);
    text-align: center;
}
.summary-card.highlight {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
}
.summary-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-400);
    margin-bottom: 2px;
}
.summary-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--charcoal);
    line-height: 1.3;
}
.summary-target {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
}
.summary-bar {
    height: 5px;
    background: var(--gray-200);
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}
.summary-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ── Day Cards Grid ── */
.days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    align-items: stretch;
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 20px;
    margin-left: calc(-1 * clamp(16px, 13.5vw, 200px) + 30px);
    margin-right: calc(-1 * clamp(16px, 13.5vw, 200px) + 30px);
}
.daily-view {
    margin-bottom: 20px;
}
.day-card {
    background: var(--white);
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    overflow: visible;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.day-card:hover {
    border-color: rgba(201,168,76,0.4);
    box-shadow: 0 2px 12px rgba(201,168,76,0.1);
}
.day-card.today {
    border-color: #c9a84c;
    border-width: 2px;
    background: linear-gradient(180deg, rgba(201,168,76,0.1) 0%, rgba(201,168,76,0.03) 40%, #ffffff 100%);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.28), 0 8px 18px rgba(201,168,76,0.18);
}
.day-card.has-plan {
    border-color: rgba(201,168,76,0.35);
}
.day-card-blank {
    background: none;
    border: none;
    pointer-events: none;
}
.day-meals-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--gold);
    color: var(--charcoal);
    font-size: 0.72rem;
    font-weight: 700;
}
.day-header {
    padding: 6px 8px;
    background: rgba(201,168,76,0.06);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.day-header-left {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.day-card.today .day-header {
    background: rgba(201,168,76,0.2);
    border-bottom-color: rgba(201,168,76,0.35);
}

.day-card.today .day-name {
    color: #8a6720;
    font-weight: 800;
}

.day-card.today .day-date {
    color: #7a5c1f;
    font-weight: 700;
}
.day-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--gold);
    text-transform: uppercase;
}
.day-date {
    font-size: 0.78rem;
    color: var(--gray-400);
}
.day-actions {
    display: flex;
    gap: 1px;
}
.day-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-300);
    padding: 4px;
    transition: var(--transition);
}
.day-actions button svg {
    width: 20px;
    height: 20px;
}
.day-actions button:hover { color: var(--gold); }
.day-action-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--gray-200) !important;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-400) !important;
    padding: 4px 8px !important;
    transition: var(--transition);
}
.day-action-edit:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #fff !important;
}

/* Day Exercise */
.day-exercise {
    padding: 4px 8px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--gold);
    cursor: pointer;
}
.day-exercise.no-exercise {
    color: var(--gray-300);
}
.day-exercise-icon { font-size: 0.8rem; }
.day-exercise-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Weekly/Monthly "Comidas" inline with kcal row */
.day-body-comidas-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.day-body-comidas-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Meal slots week modal */
.meal-slots-modal {
    max-width: 380px;
    width: 100%;
}
.meal-slots-modal-desc {
    padding: 0 1.5rem 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
}
.meal-slots-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem 1.25rem;
}
.meal-slot-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1.5px solid rgba(201,168,76,0.2);
    background: var(--surface-2, rgba(255,255,255,0.04));
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    font-family: inherit;
}
.meal-slot-chip:hover {
    border-color: rgba(201,168,76,0.5);
    color: var(--text-primary, #1a1a1a);
}
.meal-slot-chip.active {
    background: rgba(201,168,76,0.12);
    border-color: var(--gold, #C9A84C);
    color: var(--gold-dark, #9a7a2e);
    font-weight: 700;
}
.meal-slot-chip-icon { font-size: 1rem; flex-shrink: 0; }
.meal-slot-chip-label { flex: 1; }
.meal-slot-chip-check {
    font-size: 0.75rem;
    opacity: 0;
    color: var(--gold, #C9A84C);
    transition: opacity 0.15s;
}
.meal-slot-chip.active .meal-slot-chip-check { opacity: 1; }
.meal-slots-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(201,168,76,0.1);
}
.meal-slots-modal-footer .btn-secondary {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: 1.5px solid rgba(201,168,76,0.3);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}
.meal-slots-modal-footer .btn-secondary:hover { border-color: var(--gold); }
.meal-slots-modal-footer .btn-primary {
    padding: 0.55rem 1.4rem;
    border-radius: 8px;
    border: none;
    background: var(--gold, #C9A84C);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.meal-slots-modal-footer .btn-primary:hover { opacity: 0.88; }

/* Day Body */
.day-body {
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.day-body:hover {
    background: rgba(201,168,76,0.04);
}
/* Calorie row */
.day-cal-progress {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--gray-200);
    overflow: hidden;
    margin-bottom: 4px;
}
.day-cal-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #D5A638 0%, #C99727 100%);
    transition: width 0.3s ease;
}
.day-cal-progress-marker,
.macro-row-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(18, 24, 37, 0.7);
    transform: translateX(-1px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.75);
    z-index: 2;
    pointer-events: none;
}
.day-cal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.day-cal-num {
    font-size: 1rem;
    font-weight: 800;
    color: var(--charcoal);
}
.day-cal-num span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-400);
}
.day-cal-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}
.day-cal-badge.ok { color: #16a34a; background: rgba(22,163,74,0.08); }
.day-cal-badge.under { color: var(--gray-400); background: var(--gray-100); }
.day-cal-badge.over { color: #dc2626; background: rgba(220,38,38,0.08); }
/* Macro progress rows */
.day-macros-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.macro-row {
    display: grid;
    grid-template-columns: 36px 1fr 90px 42px;
    align-items: center;
    gap: 6px;
}
.macro-row-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
}
.macro-row-label-cal {
    text-transform: lowercase;
    color: var(--gold);
    font-size: 0.95rem;
    font-weight: 900;
}
.macro-row-cal {
    margin-bottom: 2px;
}
.macro-row-cal .day-cal-progress {
    height: 12px;
}
.macro-row-bar {
    position: relative;
    flex: 1;
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
}
.macro-row-bar-fill {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.macro-row-val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-400);
    text-align: right;
}
.macro-row-val-cal {
    color: var(--gray-500);
    font-size: 0.95rem;
    font-weight: 700;
}
.macro-row-pct {
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
}
.macro-row-pct.ok { color: #16a34a; }
.macro-row-pct.under { color: var(--gray-400); }
.macro-row-pct.over { color: #dc2626; }
.macro-row-cal .macro-row-pct {
    font-size: 0.85rem;
    font-weight: 800;
}
.day-meals-badge {
    font-size: 0.65rem;
    color: var(--gray-400);
    font-weight: 500;
    margin-top: auto;
}

/* Day Macros (used in daily view) */
.day-macros {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-bottom: 1px solid var(--gray-100);
}
.macro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.macro-bar {
    width: 100%;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.macro-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.macro-bar-fill.cal { background: var(--gold); }
.macro-bar-fill.protein { background: #E53E3E; }
.macro-bar-fill.carbs { background: #3182CE; }
.macro-bar-fill.fat { background: #DD6B20; }
.macro-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-400);
}
.macro-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
}

/* Day Meals */
.day-meals {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    max-height: 200px;
}
.meal-group {
    margin-bottom: 8px;
}
.meal-group-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    padding: 4px 8px;
    background: rgba(201,168,76,0.08);
    border-radius: 4px;
    margin-bottom: 4px;
}
.meal-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 4px;
    font-size: 0.95rem;
    transition: var(--transition);
    margin-bottom: 2px;
}
.meal-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    transition: var(--transition);
}
.meal-item:hover .meal-item-row {
    background: var(--white);
}
.meal-item-name {
    color: var(--gray-600);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meal-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.meal-item-cal {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.88rem;
    white-space: nowrap;
}
.meal-item-expand {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0 2px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.meal-item-expand:hover { color: var(--gold); }
.meal-item-expand .ph-duotone {
    transition: transform 0.2s;
}
.meal-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-300);
    font-size: 0.9rem;
    padding: 0 4px;
    transition: var(--transition);
}
.meal-item-edit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-300);
    padding: 0 4px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.meal-item-edit:hover { color: var(--gold); }
.meal-item-remove:hover { color: var(--red); }

/* ── Meal detail panel ── */
.meal-item-detail {
    padding: 0 8px;
    background: rgba(201,168,76,0.05);
    border-top: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.meal-item-detail.active {
    max-height: 200px;
    padding: 8px;
    border-top: 1px solid rgba(201,168,76,0.1);
}
.meal-macros-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.macro-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--gray-600);
    white-space: nowrap;
}
.macro-val {
    font-weight: 600;
    color: var(--gray-700);
    display: inline;
}

/* ── Recipe details inside daily view ──────── */
.meal-item-recipe-wrap {
    border: 1px dashed rgba(201,168,76,0.3);
    background: rgba(201,168,76,0.04);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
}
.recipe-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.recipe-name-link {
    flex: 1;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.95rem;
}
.recipe-name-link:hover {
    text-decoration: underline;
}
.recipe-save-inline {
    background: none; border: none; cursor: pointer;
    color: var(--gray-400); padding: 2px;
    transition: color 0.15s;
}
.recipe-save-inline:hover { color: var(--gold); }
.recipe-save-inline.recipe-save-already,
.recipe-save-btn.recipe-save-already {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.recipe-ing-list {
    margin-top: 6px;
}
.recipe-ing-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.92rem;
    color: var(--gray-600);
}
.recipe-ing-food { flex: 1; }
.recipe-ing-qty {
    font-weight: 600;
    color: var(--gray-500);
    min-width: 50px;
    text-align: right;
}
.recipe-ing-macros {
    font-size: 0.8rem;
    color: var(--gray-400);
    min-width: 55px;
    text-align: right;
}
.recipe-ing-edit, .recipe-ing-del {
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); font-size: 0.75rem; padding: 1px 3px;
    transition: color 0.15s;
}
.recipe-ing-edit:hover { color: var(--gold); }
.recipe-ing-del:hover { color: var(--red); }
.recipe-ingredients-list {
    margin-bottom: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.recipe-macros-summary {
    display: flex;
    gap: 16px;
    justify-content: center;
    background: var(--cream);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text);
}
.rms-item { white-space: nowrap; }
.rms-item strong { color: var(--gold-dark); font-weight: 700; }
.recipe-ing-empty {
    font-size: 0.85rem;
    color: var(--gray-400);
    font-style: italic;
    padding: 6px 0;
}
.btn-small {
    padding: 6px 14px;
    font-size: 0.85rem;
}
.btn-secondary {
    background: var(--cream);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-secondary:hover {
    background: var(--gray-100, #f0f0f0);
}

.recipe-detail-panel {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(201,168,76,0.15);
}
.recipe-detail-desc {
    font-size: 0.92rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-bottom: 8px;
}
.recipe-detail-steps-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-400);
    margin-bottom: 4px;
}
.recipe-detail-steps {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.5;
    padding-left: 18px;
    margin: 0 0 8px 0;
}
.recipe-detail-steps li { margin-bottom: 4px; }
.recipe-detail-macros {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-400);
}

/* ── Meal Sections (daily view) ──────────────── */
.meal-section {
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: visible;
    transition: opacity 0.2s;
}
.meal-section-inactive {
    opacity: 0.45;
    background: var(--gray-100);
}
.meal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: rgba(201,168,76,0.06);
    border-bottom: 1px solid rgba(201,168,76,0.1);
    transition: background 0.15s;
}
.meal-section-head-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.meal-section-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.meal-section-header:hover {
    background: rgba(201,168,76,0.12);
}
.meal-section-check {
    font-size: 1rem;
    line-height: 1;
    color: var(--gold);
}
.meal-section-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--charcoal);
}
.meal-section-inactive .meal-section-label {
    color: var(--gray-400);
}
.meal-section-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}
.meal-section-kcal {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--charcoal);
}
.meal-section-macros {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-500);
}
.meal-section-inactive .meal-section-kcal,
.meal-section-inactive .meal-section-macros {
    color: var(--gray-400);
}
.meal-section-body {
    padding: 8px 10px;
}
.meal-section-actions {
    display: flex;
    gap: 6px;
}

/* ── Slot action dropdown ── */
.slot-menu-wrap {
    position: relative;
}
.slot-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
}
.slot-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    background: var(--white);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    z-index: 999;
    overflow: hidden;
    flex-direction: column;
}
.slot-menu-dropdown.open {
    display: flex;
}
.slot-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.slot-menu-item:hover {
    background: rgba(201,168,76,0.08);
    color: var(--gold);
}
.slot-menu-item-ia {
    color: #7C3AED;
    font-weight: 600;
}
.slot-menu-item-ia:hover {
    background: rgba(124,58,237,0.08);
    color: #5B21B6;
}
.slot-menu-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 2px 0;
}
.slot-menu-section-label {
    padding: 6px 14px 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400);
    pointer-events: none;
    user-select: none;
}
.meal-section-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    background: var(--white);
    color: var(--gold);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.meal-section-btn:hover {
    background: rgba(201,168,76,0.08);
    border-color: var(--gold);
}
.meal-section-btn svg {
    width: 16px;
    height: 16px;
}
.day-actions button i {
    font-size: 1rem;
    line-height: 1;
}
.meal-section-btn i {
    font-size: 1rem;
    line-height: 1;
}
.meal-section-btn-auto {
    color: #7C3AED;
    border-color: rgba(124,58,237,0.25);
}
.meal-section-btn-auto:hover {
    background: rgba(124,58,237,0.08);
    border-color: #7C3AED;
}
.meal-section-head-right .meal-section-btn-auto,
.tile-section-btn-auto-full {
    padding: 5px 10px;
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 6px;
    background: var(--white);
    color: #7C3AED;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: none;
}
.meal-section-head-right .meal-section-btn-auto:hover,
.tile-section-btn-auto-full:hover {
    background: rgba(124,58,237,0.08);
    border-color: #7C3AED;
    color: #5B21B6;
    box-shadow: none;
}

/* ── Monthly card macro rows: compact (no % column, smaller fonts) ── */
.month-grid .day-card .macro-row {
    grid-template-columns: 20px 1fr 56px;
}
.month-grid .day-card .macro-row-pct { display: none; }
.month-grid .day-card .macro-row-val { font-size: 0.68rem; }
.month-grid .day-card .macro-row-label { font-size: 0.7rem; }
.month-grid .day-card .macro-row-val-cal { font-size: 0.72rem; }
.month-grid .day-card .day-macros-list { gap: 2px; }
.month-grid .day-card .tile-section-weekly-summary { flex-wrap: wrap; gap: 1px 4px; }
.month-grid .day-card .tile-section-kcal-inline { font-size: 0.72rem; }
.month-grid .day-card .tile-section-macros-inline { font-size: 0.6rem; }
.month-grid .day-card .tile-section-title { font-size: 0.82rem; }

/* ── Weekly view meal rows ── */
.meal-section.meal-section-weekly-row {
    margin-bottom: 2px;
    border-radius: 6px;
}
.meal-section-weekly-row .meal-section-header {
    padding: 5px 10px;
    border-bottom: none;
}
.meal-section-weekly-row .meal-section-label {
    font-size: 0.75rem;
}
.meal-section-weekly-row .meal-section-kcal {
    font-size: 0.8rem;
}
.meal-section-weekly-row .meal-section-macros {
    font-size: 0.72rem;
}

/* ── Weekly tile Comidas header summary ── */
.tile-section-weekly-summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
}
.tile-section-kcal-inline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--charcoal);
}
.tile-section-macros-inline {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
}

/* ── Compact meal chips (weekly/monthly views) ── */
.meal-slot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}
.meal-slot-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--white);
    color: var(--gray-400);
    font-family: var(--font);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.3;
}
.meal-slot-chip.active {
    background: rgba(201,168,76,0.12);
    color: var(--charcoal);
    border-color: rgba(201,168,76,0.35);
}
.meal-slot-chip:hover {
    border-color: var(--gold);
}
.meal-slot-chip-check {
    font-size: 0.55rem;
    color: var(--gold);
    width: 8px;
}

/* ── Compact meal section rows (weekly view) ── */
.meal-sections-compact-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
}
.meal-section-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.14);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.3;
}
.meal-section-compact:hover {
    background: rgba(201,168,76,0.12);
    border-color: rgba(201,168,76,0.3);
}
.meal-section-compact-off {
    background: transparent;
    border-color: var(--gray-200);
    color: var(--gray-400);
    font-weight: 500;
}
.meal-section-compact-off:hover {
    background: rgba(0,0,0,0.03);
    border-color: var(--gray-300);
}
.meal-section-compact .meal-section-check {
    font-size: 0.85rem;
    flex-shrink: 0;
    color: var(--gold);
}
.meal-section-compact-off .meal-section-check {
    color: var(--gray-300);
}
.meal-section-compact-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tile Sections (Comidas / Ejercicio) ──────── */
.tile-section {
    border-top: 1px solid var(--gray-100);
}
.tile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(201,168,76,0.06);
}
.tile-section-header.compact {
    padding: 5px 10px;
}

/* ── Month compact macro bars ── */
.day-body-month { padding: 4px 8px 2px; }
.month-macros { display: flex; flex-direction: column; gap: 2px; }
.month-macro-row { display: flex; align-items: center; gap: 4px; }
.month-macro-label { font-size: 0.62rem; font-weight: 700; width: 18px; flex-shrink: 0; }
.month-macro-bar { flex: 1; height: 3px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }
.month-macro-fill { height: 100%; border-radius: 2px; }
.month-macro-pct { font-size: 0.6rem; font-weight: 700; width: 26px; text-align: right; flex-shrink: 0; }
.month-macro-pct.ok { color: #2D8C5A; }
.month-macro-pct.over { color: #C53030; }
.month-macro-pct.under { color: var(--gray-500); }
.tile-section-meals-summary { font-size: 0.65rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.tile-section-header.month {
    padding: 3px 6px;
}
.tile-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-700);
}
.tile-section-header.compact .tile-section-title,
.tile-section-header.month .tile-section-title {
    font-size: 0.75rem;
}
.tile-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tile-section-kcal {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6D28D9;
    background: rgba(124,58,237,0.10);
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1;
}
.tile-section-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    font-family: var(--font);
}
.tile-section-btn svg {
    width: 18px;
    height: 18px;
}
.tile-section-btn:hover {
    color: var(--gray-700);
    background: rgba(0,0,0,0.05);
}
.tile-section-btn-auto {
    color: #7C3AED;
}
.tile-section-btn-auto:hover {
    color: #5B21B6;
    background: rgba(124,58,237,0.08);
}
.tile-section-meals {
    flex: 1;
}
.tile-section-exercise {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-top: auto;
}
.tile-section-exercise .tile-section-header {
    background: rgba(124,58,237,0.04);
}

/* ── Training Day Type ─────────────────────────────────────── */
.tile-section-training-day {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-top: 0;
}
.tile-section-training-day .tile-section-header {
    background: rgba(201,168,76,0.06);
}
.tdt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px !important;
}
.tdt-pill {
    font-family: var(--font);
    font-size: 0.72rem;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tdt-pill:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
    color: var(--gray-800);
}
.tdt-pill-active {
    border-color: var(--gold);
    background: rgba(201,168,76,0.15);
    color: var(--gold-dark, #9c7c20);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.15);
}
.tdt-badge {
    font-size: 0.7rem;
    margin-left: 4px;
}

.tile-section-header.compact .tile-section-kcal {
    font-size: 0.62rem;
    padding: 1px 6px;
}
.tile-section-body {
    padding: 0;
}

/* ── Tile Footer (kept for compat, but no longer used) ──────── */
.tile-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--gray-100);
    background: rgba(167,139,250,0.03);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    display: none;
}

/* Base tile button */
.tile-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 1;
    border: none;
    background: none;
}

/* Auto-plan button — primary action */
.tile-btn-autofill {
    color: var(--white);
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(124,58,237,0.2);
}
.tile-btn-autofill:hover {
    background: linear-gradient(135deg, #6D28D9, #5B21B6);
    box-shadow: 0 3px 12px rgba(124,58,237,0.3);
}

/* ── Exercise Row (compact, in weekly/month tiles) ──────────────── */
.tile-exercise-row {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--gray-400);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition);
}
.tile-exercise-row:hover {
    background: rgba(167,139,250,0.06);
}
.tile-exercise-row.has-data {
    color: #A78BFA;
    background: rgba(167,139,250,0.06);
}
.tile-exercise-row.compact {
    padding: 3px 8px;
    font-size: 0.72rem;
}
.tile-exercise-icon { font-size: 1rem; flex-shrink: 0; }
.tile-exercise-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-exercise-kcal {
    font-weight: 700;
    color: #A78BFA;
    white-space: nowrap;
    font-size: 0.72rem;
}

/* ── Exercise Expanded (multi-line, daily view) ────────────────── */
.tile-exercise-expanded {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition);
}
.tile-exercise-expanded:hover {
    background: rgba(167,139,250,0.06);
}
.tile-exercise-expanded-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #A78BFA;
    margin-bottom: 4px;
}
.tile-exercise-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 22px;
}
.tile-exercise-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--gray-500);
}
.tile-exercise-line-label {
    font-weight: 600;
}
.tile-exercise-line-dur {
    font-size: 0.85rem;
    color: var(--gray-400);
}
.tile-exercise-entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(124,58,237,0.08);
}
.tile-exercise-entry-row:last-child {
    border-bottom: none;
}
.tile-exercise-entry-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tile-exercise-entry-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
}
.tile-exercise-entry-meta {
    font-size: 0.85rem;
    color: var(--gray-500);
}
.tile-exercise-entry-kcal {
    font-size: 0.92rem;
    font-weight: 800;
    color: #6D28D9;
    white-space: nowrap;
}
.tile-exercise-entry-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    border-radius: 6px;
}
.tile-exercise-entry-btn:hover {
    background: rgba(0,0,0,0.05);
    color: var(--gray-700);
}
.tile-exercise-entry-btn-del:hover {
    color: #dc2626;
    background: rgba(220,38,38,0.08);
}

/* ── Meals count ─────────────────────────────────────────── */
.tile-meals-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-400);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Legacy Meal Slot Buttons (no longer used) ──────── */
.meal-slot-buttons { display: none; }
.meal-slot-btn { display: none; }

.tile-meals-selector {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tile-meals-selector label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-400);
}
.tile-meals-selector select {
    padding: 2px 6px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gold);
    cursor: pointer;
}
.tile-meals-info {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.meal-slot-empty {
    font-size: 0.78rem;
    color: var(--gray-200);
    font-style: italic;
    padding: 4px 8px;
}

/* ── Daily food list ─────────────────────────────────────────────── */
.day-meals-list {
    padding: 0 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.day-meals-empty {
    padding: 10px 8px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--gray-300);
    font-style: italic;
}
.day-meal-group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 2px;
}
.day-meal-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--gray-600);
    padding: 3px 4px;
    border-radius: 4px;
    background: rgba(201,168,76,0.04);
}
.day-meal-item-name { flex: 1; }
.day-meal-item-cal {
    font-size: 0.65rem;
    color: var(--gray-400);
    white-space: nowrap;
}
.day-meal-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.day-meal-item:hover .day-meal-item-actions { opacity: 1; }
.day-meal-item-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--gray-300);
    border-radius: 3px;
    line-height: 1;
}
.day-meal-item-actions button:hover { color: var(--red); background: rgba(229,62,62,0.08); }

/* Legacy compat (kept for other references) */
.day-footer { display: none; }
.btn-add-food, .btn-view-meals, .btn-auto-fill { display: none; }

/* Daily recipes (today view only) */
.today-recipes-wrap {
    border-top: 1px solid var(--gray-100);
    padding: 16px;
    display: grid;
    gap: 10px;
}
.recipe-today-group {
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: var(--radius-sm);
    background: rgba(201,168,76,0.04);
    padding: 10px;
}
.recipe-today-meal {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gold);
    margin-bottom: 6px;
    font-weight: 700;
}
.recipe-today-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px;
    padding-top: 8px;
}
.recipe-today-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-100);
}
.recipe-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gold-bg);
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.recipe-save-btn:hover {
    background: var(--gold);
    color: var(--charcoal);
}
.recipe-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.recipe-today-title { font-weight: 700; color: var(--charcoal); }
.recipe-today-desc { font-size: 0.8rem; color: var(--gray-500); margin: 4px 0; }
.recipe-today-meta { font-size: 0.75rem; color: var(--gold); margin-bottom: 8px; }
.recipe-today-subtitle { font-size: 0.75rem; font-weight: 700; margin-top: 8px; color: var(--gray-600); }
.recipe-today-list { margin: 4px 0 0 16px; font-size: 0.8rem; color: var(--gray-500); }

/* Meals per day selector in day card */
.day-meals-count {
    padding: 8px 16px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}
.day-meals-count label {
    color: var(--gray-500);
    font-weight: 500;
}
.day-meals-count select {
    padding: 4px 8px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.8rem;
    background: var(--gray-100);
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   FOOD SELECTOR MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.modal-overlay.active {
    display: flex;
}
body.modal-open {
    overflow: hidden;
}
.modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.modal-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--charcoal);
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-400);
    transition: var(--transition);
    padding: 4px;
}
.modal-close:hover { color: var(--red); }

/* Modal - Remaining macros bar */
.modal-remaining {
    padding: 16px 32px;
    background: var(--gray-100);
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--gray-200);
}
.remaining-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.remaining-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
}
.remaining-value {
    font-size: 1.3rem;
    font-weight: 800;
}
.remaining-value.positive { color: var(--gold); }
.remaining-value.negative { color: var(--red); }
.remaining-value.zero { color: var(--gray-400); }

/* Search & Filters */
.modal-filters {
    padding: 16px 32px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}
.food-search-row {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}
.food-search-row .search-input {
    flex: 1;
    width: auto;
    min-width: 0;
}
.food-search-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.88rem;
    white-space: nowrap;
    border-radius: var(--radius-md);
}
.food-mine-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px;
}
.search-input {
    flex: 0 0 auto;
    width: 40%;
    min-width: 160px;
    padding: 12px 16px 12px 40px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: var(--app-control-font-size);
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A0A0AB' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 14px center;
}
.search-input:focus {
    outline: none;
    border-color: var(--gold);
}
.category-filter {
    padding: 10px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: var(--app-control-font-size);
    background: var(--white);
    min-width: 150px;
}
.meal-type-filter {
    padding: 10px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: var(--app-control-font-size);
    background: var(--white);
    min-width: 150px;
}

/* Food Grid */
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}
.food-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: stretch;
}
.food-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 10px 8px 8px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.food-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.food-card.selected {
    border-color: var(--gold);
    background: rgba(201,168,76,0.04);
}
.food-image {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    margin: 0 auto 8px;
    box-shadow: var(--shadow-sm);
}
.food-name {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--charcoal);
    margin-bottom: 5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    flex-shrink: 0;
}
.food-macros {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 0.72rem;
}
.food-macro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 4px;
    border-radius: 4px;
    background: var(--gray-100);
}
.food-macro-value {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--charcoal);
}
.food-macro-label {
    font-size: 0.68rem;
    color: var(--gray-400);
    text-transform: uppercase;
}
.food-calories {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--gold-dark);
    margin-bottom: 3px;
}
.food-card-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: auto;
    padding-top: 8px;
    flex-wrap: nowrap;
}
.food-card-btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-400);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1;
}
.food-card-btn:first-child {
    font-size: 1.1rem;
}
.food-card-btn:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}
.food-card-btn.food-card-btn-active {
    color: var(--gold-dark);
    border-color: var(--gold);
    background: rgba(201,168,76,0.07);
}
.recipe-day-picker-modal {
    max-width: 960px;
    width: 95vw;
}
.recipe-day-picker-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.recipe-day-picker-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}
.recipe-day-picker-grid .food-name {
    font-size: 0.78rem;
    min-height: 2.2em;
}
.recipe-day-picker-grid .food-calories {
    font-size: 0.75rem;
}
.recipe-day-picker-grid .food-macros {
    font-size: 0.68rem;
}
.recipe-day-picker-grid .food-card {
    padding: 10px 10px 8px;
}
.recipe-day-picker-servings {
    min-width: 90px;
}
.recipe-day-picker-card {
    cursor: pointer;
}
.recipe-day-picker-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff8de 0%, #f7f0cf 100%);
    box-shadow: var(--shadow-sm);
    font-size: 1.7rem;
}
.recipe-day-picker-desc {
    font-size: 0.72rem;
    color: var(--gray-400);
    margin-top: 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.05em;
}

/* ── Recipe Detail Modal (shared between plan + recetas pages) ── */
.recipe-detail-modal {
    max-width: 480px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.recipe-detail-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.recipe-detail-meta {
    font-size: 0.78rem;
    color: var(--gray-400);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.recipe-detail-macros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--cream, #fef9f0);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
}
.recipe-detail-macros .macro-item { display: flex; align-items: center; gap: 4px; }
.recipe-detail-macros .macro-val { color: var(--primary); font-weight: 700; }
.recipe-detail-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 14px;
    line-height: 1.5;
    font-style: italic;
}
.recipe-detail-desc:empty { display: none; }
.recipe-detail-section { margin-bottom: 14px; }
.recipe-detail-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gray-100, #eee);
}
details.recipe-detail-section { margin-top: 12px; }
details.recipe-detail-section summary.recipe-detail-heading {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
details.recipe-detail-section summary.recipe-detail-heading::after {
    content: '▸';
    margin-left: auto;
    transition: transform 0.2s;
}
details.recipe-detail-section[open] summary.recipe-detail-heading::after {
    transform: rotate(90deg);
}
details.recipe-detail-section summary.recipe-detail-heading::-webkit-details-marker { display: none; }
.recipe-detail-ingredients { list-style: none; padding: 0; margin: 0; }
.recipe-detail-ingredients li {
    font-size: 0.82rem;
    color: var(--gray-600);
    padding: 5px 0;
    border-bottom: 1px solid var(--gray-50, #f5f5f5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.recipe-detail-ingredients li:last-child { border-bottom: none; }
.recipe-detail-ingredients .ing-food { font-weight: 500; color: var(--gray-700); }
.recipe-detail-ingredients .ing-qty { font-size: 0.78rem; color: var(--gray-400); white-space: nowrap; margin-left: 8px; }
.recipe-detail-steps { list-style: none; padding: 0; margin: 0; counter-reset: step-counter; }
.recipe-detail-steps li {
    font-size: 0.82rem;
    color: var(--gray-600);
    padding: 6px 0 6px 28px;
    position: relative;
    line-height: 1.5;
    counter-increment: step-counter;
}
.recipe-detail-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0; top: 6px;
    width: 20px; height: 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 600px) {
    .recipe-detail-modal { max-width: 100%; }
    .recipe-detail-body { padding: 12px 16px 20px; }
}

/* Quantity Modal */
.quantity-modal {
    max-width: 400px;
}
.quantity-modal .quantity-form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.exercise-day-modal {
    max-width: 720px;
    max-height: min(94vh, 920px);
    display: flex;
    flex-direction: column;
}
.exercise-day-modal .quantity-form {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.quantity-form {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Analytics modal */
.analytics-modal {
    max-width: 520px;
    max-height: 92vh;
}
.analytics-modal-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
}
.analytics-loading,
.analytics-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.9rem;
}
.analytics-exercise-box {
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 12px;
    background: rgba(201,168,76,0.06);
    padding: 12px;
    margin-bottom: 16px;
}
.analytics-exercise-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    font-size: 0.86rem;
    color: var(--gray-700);
}
.analytics-exercise-head strong {
    color: var(--charcoal);
}
.analytics-exercise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.analytics-exercise-chip {
    font-size: 0.75rem;
    color: var(--gray-600);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--white);
}
.analytics-exercise-empty {
    margin-top: 8px;
    color: var(--gray-400);
    font-size: 0.78rem;
}

/* Macro donut section */
.analytics-macro-section {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.analytics-macro-donut {
    flex-shrink: 0;
    transform: rotate(-90deg);
}
.analytics-macro-donut-cal {
    font-size: 20px;
    font-weight: 700;
    fill: var(--charcoal);
    transform: rotate(90deg);
    transform-origin: 80px 80px;
}
.analytics-macro-donut-unit {
    font-size: 11px;
    fill: var(--gray-400);
    transform: rotate(90deg);
    transform-origin: 80px 80px;
}
.analytics-macro-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.analytics-macro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-700);
}
.analytics-macro-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.analytics-macro-label {
    flex: 1;
}
.analytics-macro-val {
    font-weight: 700;
    color: var(--charcoal);
}
.analytics-macro-pct {
    color: var(--gray-400);
    font-size: 0.78rem;
    min-width: 32px;
    text-align: right;
}

/* Vertical donut layout with chips below */
.analytics-macro-section--vertical {
    flex-direction: column;
    align-items: center;
}
.analytics-macro-legend-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.analytics-macro-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 12px;
    border: 2px solid;
    min-width: 90px;
    flex: 1;
}
.analytics-macro-chip-label {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}
.analytics-macro-chip-val {
    font-size: 0.82rem;
    font-weight: 700;
}

/* Nutrient cards grid */
.analytics-nutrient-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.analytics-nutrient-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 6px;
    border-radius: 12px;
    background: var(--gray-50);
    border: 1px solid rgba(0,0,0,0.04);
}
.analytics-nutrient-card i {
    font-size: 1.2rem;
    color: var(--gray-400);
    margin-bottom: 2px;
}
.analytics-nutrient-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--charcoal);
}
.analytics-nutrient-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Meal breakdown section */
.analytics-meals-section {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.analytics-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 10px;
}
.analytics-bar {
    height: 10px;
    display: flex;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
    margin-bottom: 10px;
}
.analytics-bar-seg {
    display: block;
    height: 100%;
}
.analytics-meal-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.analytics-meal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--gray-600);
}
.analytics-meal-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.analytics-meal-name {
    flex: 1;
}
.analytics-meal-cal {
    font-weight: 700;
    color: var(--charcoal);
}
.analytics-meal-pct {
    color: var(--gray-400);
    font-size: 0.72rem;
    min-width: 28px;
    text-align: right;
}

@media (max-width: 480px) {
    .analytics-macro-section {
        flex-direction: column;
        gap: 14px;
    }
    .analytics-nutrient-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Quantity stepper (+/- buttons) */
.qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.qty-stepper-btn {
    width: 40px;
    height: 42px;
    background: var(--gray-50);
    border: none;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s;
    flex-shrink: 0;
}
.qty-stepper-btn:active { background: var(--gray-200); }
.qty-stepper-input {
    flex: 1;
    border: none !important;
    border-left: 1px solid var(--gray-200) !important;
    border-right: 1px solid var(--gray-200) !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 4px;
    -moz-appearance: textfield;
}
.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-food-info {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
}
.quantity-food-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--charcoal);
    margin-bottom: 4px;
}
.quantity-food-per100 {
    font-size: 0.8rem;
    color: var(--gray-400);
}
.quantity-input-group {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.quantity-input-group .form-group {
    flex: 1;
    margin-bottom: 0;
}
.quantity-preview {
    background: var(--gray-100);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
}
.quantity-preview-item {
    display: flex;
    flex-direction: column;
}
.quantity-preview-value {
    font-weight: 800;
    font-size: 1rem;
    color: var(--charcoal);
}
.quantity-preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
}
.quantity-preview-extended {
    text-align: center;
    padding: 10px 12px 0;
}
.ext-nutrients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: rgba(201,168,76,0.06);
    border-radius: 8px;
    padding: 10px 8px;
}
.ext-nutrient {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ext-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-400);
}
.ext-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-600);
}

/* Per-100g nutrition table */
#qty-food-per100 {
    user-select: none;
}
.per100-basis-only {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: right;
}
.per100-detail {
    display: block;
    margin-top: 8px;
    background: rgba(201,168,76,0.06);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.per100-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.per100-table thead {
    background: rgba(201,168,76,0.12);
}
.per100-table th {
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 1px solid rgba(201,168,76,0.2);
    font-size: 0.9rem;
}
.per100-table th:first-child {
    text-align: left;
}
.per100-table td {
    padding: 8px 12px;
    color: var(--gray-600);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.per100-table td:first-child {
    text-align: left;
}
.per100-table td:nth-child(3) {
    font-weight: 600;
}
.per100-table tr:last-child td {
    border-bottom: none;
}
.per100-table tr.per100-sub td:first-child {
    padding-left: 28px;
    color: var(--gray-400);
    font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════════
   CALENDAR VIEW
   ═══════════════════════════════════════════════════════════ */
.calendar-section {
    padding: 40px;
    background: var(--offwhite);
    min-height: 100vh;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.calendar-nav button {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}
.calendar-nav button:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.calendar-month {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--charcoal);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-weekday {
    padding: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-400);
}
.calendar-day {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    min-height: 100px;
    padding: 10px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.calendar-day:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
}
.calendar-day.today {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}
.calendar-day.has-plan {
    background: var(--gold-bg);
    border-color: rgba(201,168,76,0.2);
}
.calendar-day.empty {
    background: var(--gray-100);
    cursor: default;
    opacity: 0.4;
}
.calendar-day-number {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--charcoal);
    margin-bottom: 8px;
}
.calendar-day-summary {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.calendar-day-calories {
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 0.95rem;
}
.calendar-day-exercise {
    font-size: 0.85rem;
    color: var(--gold-dark);
    margin-top: 4px;
}
.calendar-day-selected {
    outline: 3px solid var(--gold);
    outline-offset: -3px;
}
.calendar-day.expanded {
    grid-column: span 2;
    min-height: 170px;
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}
.calendar-day-expand {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.calendar-day-expand-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.calendar-day-expand-stats {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--gray-600);
}
.calendar-day-expand-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.calendar-day-expand-actions button {
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--charcoal);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.72rem;
    cursor: pointer;
}
.calendar-day-expand-actions button:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Copy Modal */
.copy-targets {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 20px 0;
}
.copy-target-day {
    padding: 12px 8px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
    font-weight: 600;
}
.copy-target-day:hover {
    border-color: var(--gold);
}
.copy-target-day.selected {
    border-color: var(--gold);
    background: var(--gold-bg);
    color: var(--gold-dark);
}

/* ═══════════════════════════════════════════════════════════
   EXERCISE MODAL
   ═══════════════════════════════════════════════════════════ */
.exercise-help {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--gray-500);
    margin-top: -4px;
}
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.exercise-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.exercise-picker-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 14px;
    background: var(--white);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
    font-family: var(--font);
}
.exercise-picker-card:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.exercise-picker-card.selected {
    border-color: #8B5CF6;
    background: rgba(124,58,237,0.05);
}
.exercise-picker-icon {
    font-size: 1.35rem;
}
.exercise-picker-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.3;
}
.exercise-picker-meta {
    font-size: 0.85rem;
    color: var(--gray-500);
}
.exercise-picker-kcal {
    font-size: 0.9rem;
    font-weight: 800;
    color: #6D28D9;
}
.exercise-selected-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.exercise-selected-empty {
    padding: 12px 14px;
    border: 1px dashed var(--gray-200);
    border-radius: 12px;
    font-size: 0.92rem;
    color: var(--gray-400);
    text-align: center;
}
.exercise-selected-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
    background: rgba(124,58,237,0.03);
}
.exercise-selected-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.exercise-selected-icon {
    font-size: 1.1rem;
}
.exercise-selected-copy {
    min-width: 0;
}
.exercise-selected-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
}
.exercise-selected-meta {
    font-size: 0.85rem;
    color: var(--gray-500);
}
.exercise-selected-kcal {
    font-size: 0.92rem;
    font-weight: 800;
    color: #6D28D9;
    white-space: nowrap;
}
.exercise-selected-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
}
.exercise-selected-btn:hover {
    color: var(--gray-700);
    background: rgba(0,0,0,0.05);
}
.exercise-selected-btn-del:hover {
    color: #dc2626;
    background: rgba(220,38,38,0.08);
}
/* Exercise card */
.ex-row {
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    background: var(--white);
}
.ex-row:hover {
    border-color: var(--gray-300);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.ex-row.active {
    border-color: var(--gold);
    box-shadow: 0 2px 10px rgba(201,168,76,0.15);
}
/* Toggle header */
.ex-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
}
.ex-row.active .ex-toggle {
    background: linear-gradient(90deg, rgba(201,168,76,0.06), transparent);
}
.ex-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
    color: transparent;
    transition: var(--transition);
}
.ex-row.active .ex-check {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--charcoal);
}
.ex-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ex-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--charcoal);
    flex: 1;
}
.ex-badge {
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--gold);
    color: var(--charcoal);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ex-chevron {
    font-size: 0.65rem;
    color: var(--gray-400);
    flex-shrink: 0;
    margin-left: 2px;
}
/* Expanded controls */
.ex-controls {
    padding: 0 16px 14px;
    background: var(--white);
}
.ex-controls-inner {
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ex-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-400);
    margin-bottom: -4px;
}
/* Intensity buttons */
.ex-intensity {
    display: flex;
    gap: 6px;
}
.ex-intensity-btn {
    flex: 1;
    padding: 7px 4px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-500);
    transition: var(--transition);
    font-family: var(--font);
    text-align: center;
    white-space: nowrap;
}
.ex-intensity-btn:hover { border-color: var(--gray-400); color: var(--charcoal); }
.ex-intensity-btn.light.selected    { border-color: #48BB78; background: #F0FFF4; color: #276749; }
.ex-intensity-btn.moderate.selected { border-color: #ECC94B; background: #FFFFF0; color: #744210; }
.ex-intensity-btn.intense.selected  { border-color: #ED8936; background: #FFFAF0; color: #7B341E; }
.ex-intensity-btn.very_intense.selected { border-color: #FC8181; background: #FFF5F5; color: #742A2A; }
/* Duration stepper */
.ex-dur {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ex-dur-btn {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-family: var(--font);
    flex-shrink: 0;
}
.ex-dur-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.05); }
.ex-dur-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    justify-content: center;
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 6px 10px;
}
.ex-dur-input {
    width: 44px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font);
    color: var(--charcoal);
    outline: none;
}
.ex-dur-unit {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-400);
}
.ex-kcal-inline {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--gold-dark);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}
.exercise-config-modal {
    max-width: 440px;
}
.ex-dur-config {
    justify-content: center;
}
/* Total box */
.exercise-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.04));
    border: 1.5px solid rgba(201,168,76,0.3);
    margin-bottom: 14px;
}
.exercise-total-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.exercise-total-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--gold-dark);
}
.exercise-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.exercise-actions .btn-outline {
    min-width: 110px;
}

/* ═══════════════════════════════════════════════════════════
   PLANNER RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .month-grid { grid-template-columns: repeat(5, 1fr); }
    .planner-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .month-grid { grid-template-columns: repeat(4, 1fr); }
    .food-grid { grid-template-columns: repeat(2, 1fr); }
    .calendar-grid { gap: 2px; }
    .calendar-day { min-height: 80px; padding: 6px; }
    .calendar-day.expanded { grid-column: span 2; min-height: 140px; }
    .analytics-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    /* Layout */
    .planner-section { padding: 8px 0; }
    .planner-section .container { padding-left: 0; padding-right: 0; }
    .planner-app { padding: 14px 0 0 0 !important; }
    .days-grid { grid-template-columns: 1fr; }
    .month-grid { grid-template-columns: repeat(3, 1fr); }
    .daily-view { margin-bottom: 14px; }
    .day-card.day-card-daily {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .planner-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .summary-card { padding: 8px 10px; }
    .summary-value { font-size: 0.9rem; }
    .summary-label { font-size: 0.65rem; letter-spacing: 0.3px; }
    .macro-row-val { min-width: 68px; font-size: 0.68rem; }
    .macro-row-val-cal { min-width: 72px; }
    .macro-row-pct { min-width: 30px; font-size: 0.64rem; }
    .macro-row-label-cal { font-size: 0.74rem; width: 30px; }
    .macro-row-cal .day-cal-progress { height: 9px; }
    .macro-row-cal .macro-row-val-cal { font-size: 0.74rem; }
    .macro-row-cal .macro-row-pct { font-size: 0.66rem; }
    .tile-section-kcal { font-size: 0.6rem; padding: 1px 5px; }

    /* Planner header controls */
    .planner-header { margin-bottom: 4px; }
    .planner-header h1 { font-size: 1.35rem; }
    .controls-top { flex-wrap: wrap; }
    .view-btn { font-size: 0.82rem; padding: 4px 7px; }
    .period-label { min-width: 0; font-size: 0.82rem; }
    .nav-arrow { width: 26px; height: 26px; font-size: 0.9rem; }
    .nav-today { padding: 4px 8px; font-size: 0.82rem; }
    .action-label { font-size: 0.65rem; }
    .action-select { font-size: 0.72rem; padding: 3px 5px; }
    .action-btn { font-size: 0.8rem; padding: 4px 6px; }

    /* Day cards */
    .day-card { min-height: auto; }

    /* Modal - slide up from bottom on mobile */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal {
        max-height: 85vh;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        width: 100%;
    }
    .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .modal-header { padding: 16px 20px; }
    .modal-remaining {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
    }
    .remaining-item { flex: 0 0 calc(50% - 4px); }
    .remaining-label { font-size: 0.65rem; }
    .remaining-value { font-size: 0.8rem; }
    /* Modal filters - stack vertically */
    .modal-filters { flex-direction: column; gap: 6px; padding: 8px 12px; }
    .food-search-row { width: 100%; }
    .search-input { width: 100%; min-width: 0; }
    .category-filter, .meal-type-filter { width: 100%; min-width: 0; }
    .modal-body { padding: 8px 10px; }
    .food-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .food-card { padding: 8px; }
    .food-image { width: 48px; height: 48px; margin-bottom: 8px; }
    .food-name { font-size: 0.75rem; margin-bottom: 4px; }
    .food-calories { font-size: 0.8rem; }
    .food-macros { gap: 4px; font-size: 0.65rem; }
    .food-macro { padding: 2px 4px; }
    .food-macro-value { font-size: 0.65rem; }
    .recipe-day-picker-icon { width: 48px; height: 48px; font-size: 1.45rem; }
    .recipe-day-picker-desc { font-size: 0.68rem; min-height: 3.8em; }
    .recipe-day-picker-grid { grid-template-columns: 1fr 1fr !important; }
    .recipe-day-picker-filters { flex-direction: column; gap: 6px; }
    .recipe-day-picker-filters .search-input,
    .recipe-day-picker-filters .category-filter { width: 100%; min-width: 0; }

    /* Quantity modal */
    .quantity-modal { max-width: 100%; }
    .quantity-form { padding: 20px 16px; gap: 14px; }
    .analytics-modal { max-width: 100%; }
    .analytics-modal-body { padding: 14px; }
    .analytics-row { grid-template-columns: 1fr auto; }
    .analytics-row-cum { grid-column: 1 / -1; padding-left: 14px; }
    .quantity-input-group { flex-direction: column; gap: 10px; }
    .exercise-day-modal {
        max-height: 100vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    #exercise-modal .quantity-form {
        overflow-y: auto;
        max-height: calc(100vh - 84px);
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    .exercise-actions {
        flex-direction: column;
    }
    .exercise-actions .btn-outline,
    .exercise-actions .btn-primary {
        width: 100%;
    }

    .meal-section-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: stretch;
    }
    .meal-section-head-left {
        width: 100%;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }
    .meal-section-head-right {
        width: auto;
        display: contents;
        margin-left: 0;
    }
    .meal-section-meta {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-content: flex-end;
        align-items: baseline;
        gap: 6px;
        text-align: right;
    }
    .meal-section-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
    }
    .meal-section-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        font-size: 0.68rem;
        padding: 5px 6px;
    }
    .meal-section-label {
        font-size: 0.8rem;
    }
    .meal-section-kcal {
        font-size: 0.82rem;
    }
    .meal-section-macros {
        font-size: 0.72rem;
    }

    /* Copy targets - 4 per row instead of 7 */
    .copy-targets { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .copy-target-day { padding: 8px 4px; font-size: 0.85rem; }

    /* Exercise modal */
    .ex-name { font-size: 0.8rem; }
    .ex-controls { flex-wrap: wrap; gap: 6px; }
    .intensity-selector { flex-wrap: wrap; }
    .intensity-btn { flex: 0 0 calc(50% - 3px); font-size: 0.72rem; padding: 8px 4px; }

    /* Calendar */
    .calendar-section { padding: 16px; }
    .calendar-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .calendar-day { min-height: 72px; padding: 6px; }
    .calendar-day-number { font-size: 0.82rem; font-weight: 700; }
    .calendar-day-calories { font-size: 0.78rem; }
    .calendar-day-summary { font-size: 0.68rem; }
    .calendar-day.expanded { grid-column: span 2; }
    .calendar-month { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   PLAN PAGE — Container alignment (matches Recetas/Alimentos)
   ═══════════════════════════════════════════════════════════ */
.planner-app {
    padding: 14px clamp(16px, 13.5vw, 200px) 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
@media (max-width: 600px) {
    .planner-app { padding: 14px 10px 0 10px !important; }
}

/* Initial hidden state for JS-toggled views */
#month-grid, #daily-view { display: none; }

/* ── Modal overlay z-index stack ── */
#food-modal        { z-index: 10002; }
#quantity-modal,
#manual-modal      { z-index: 10003; }
#nutrava-confirm-modal { z-index: 10010; }
#edit-meal-modal   { z-index: 10000; }

/* ── Confirm modal ── */
#nutrava-confirm-modal .modal { max-width: 400px; }
#nutrava-confirm-msg { color: var(--gray-600); margin: 0 0 18px; line-height: 1.5; }
.modal-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Edit meal modal ── */
#edit-meal-food-name { font-weight: 600; margin-bottom: 4px; color: var(--gray-700); }
#edit-meal-modal .quantity-form .btn-primary:last-child { margin-top: 8px; }

/* ── Day meals modal ── */
#day-meals-modal-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--gray-200, #e9ecef);
    background: var(--gray-50, #f8f9fa);
}
.day-meals-modal-inner {
    max-width: 560px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.day-meals-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 18px 8px;
    min-height: 80px;
}
.day-meals-modal-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--gray-200, #e9ecef);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Filter row without top padding ── */
.modal-filters-actions { padding-top: 0; }

/* ── Button utilities ── */
.btn-full { width: 100%; }
.btn-flex { flex: 1; }

/* ── Copy modal hint ── */
.copy-modal-hint { color: var(--gray-500); margin-bottom: 8px; font-size: 1rem; }

/* ── Toast container ── */
#nutrava-toasts {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

/* ── Toast notifications ── */
.nutrava-toast {
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    max-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: auto;
}
.nutrava-toast.show           { opacity: 1; transform: translateY(0); }
.nutrava-toast-info           { background: #2c3e50; color: #fff; }
.nutrava-toast-success        { background: #27ae60; color: #fff; }
.nutrava-toast-error          { background: #e74c3c; color: #fff; }
.nutrava-toast-warning        { background: #f39c12; color: #fff; }

/* ── View meals button (weekly card) ── */
.btn-view-meals {
    background: var(--primary, #2ecc71);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-view-meals:hover { background: var(--primary-dark, #27ae60); }

/* ── Thinking dots animation ── */
.thinking-dots { display: flex; gap: 6px; justify-content: center; }
.thinking-dots span {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--primary, #c9a84c);
    animation: thinkBounce 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1); opacity: 1; }
}

/* ── Photo analyze modal ── */
.photo-analyze-modal { max-width: 400px; }
.slot-menu-item-photo {
    color: #0891b2;
}
.slot-menu-item-photo:hover {
    background: rgba(8,145,178,0.08);
    color: #0369a1;
}
.photo-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: 10px;
    cursor: pointer;
    background: var(--cream, #fdf9f0);
    transition: border-color 0.15s;
    overflow: hidden;
    padding: 16px;
}
.photo-upload-area:hover { border-color: var(--gold); }
#photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--gray-400, #aaa);
}
#photo-placeholder p {
    margin: 0;
    font-size: 0.88rem;
}
.photo-pick-btns {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.photo-pick-btns .btn-outline {
    font-size: 0.82rem;
    padding: 6px 12px;
}
.photo-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(201,168,76,0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: photoSpin 0.75s linear infinite;
    margin: 0 auto;
}
@keyframes photoSpin { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.photo-result-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    margin-bottom: 10px;
    text-align: center;
}
.photo-macro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}
.photo-macro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--cream, #fdf9f0);
    border-radius: 8px;
    padding: 8px 4px;
}
.photo-macro-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
}
.photo-macro-label {
    font-size: 0.72rem;
    color: var(--gray-500, #9ca3af);
    margin-top: 2px;
}
.photo-portion-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-500, #9ca3af);
    margin: 0 0 6px;
}
.photo-portion-group {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.photo-portion-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    background: var(--white);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
    cursor: pointer;
    transition: all 0.15s;
}
.photo-portion-btn:hover { border-color: var(--gold); color: var(--gold); }
.photo-portion-active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white);
}

/* Candidate buttons in photo analyze modal */
.photo-candidate-btn {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    text-align: left;
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.photo-candidate-btn:hover {
    background: var(--gold);
    color: var(--charcoal);
}
.photo-candidate-btn .candidate-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.photo-candidate-btn .candidate-kcal {
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 400;
    font-size: 0.82rem;
    opacity: 0.75;
}

/* -- Day objectives panel -------------------------------------------- */
.day-obj-bar {
    padding: 4px 14px 10px;
    border-top: 1px solid rgba(201,168,76,0.12);
}
.day-obj-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.day-obj-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--gold);
    font-weight: 600;
    padding: 2px 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.day-obj-toggle:hover { opacity: 1; }
.day-obj-reset {
    background: none;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--gray-400);
    padding: 2px 8px;
    transition: color 0.15s, border-color 0.15s;
}
.day-obj-reset:hover {
    color: var(--gold);
    border-color: var(--gold);
}
.dobj-reset-icon {
    display: inline-block;
}
.dobj-reset-spin {
    animation: dobj-spin 0.7s linear infinite;
}
.dobj-reset-done {
    color: #22c55e;
    font-weight: 700;
}
@keyframes dobj-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
.day-obj-panel {
    margin-top: 8px;
    overflow-x: auto;
}
.day-obj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.73rem;
    min-width: 320px;
}
.day-obj-table th {
    color: var(--gray-400);
    font-weight: 600;
    text-align: center;
    padding: 2px 4px 4px;
    font-size: 0.66rem;
    border-bottom: 1px solid rgba(201,168,76,0.12);
}
.day-obj-table td {
    padding: 3px 3px;
    vertical-align: middle;
}
.day-obj-table td:first-child {
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    padding-right: 6px;
    min-width: 64px;
}
/* Original row */
.dor-orig td:first-child { color: var(--gray-400); font-weight: 400; font-style: italic; }
.doi-orig-val {
    display: block;
    text-align: center;
    font-size: 0.69rem;
    color: var(--gray-400);
    font-style: italic;
}
.doi-orig-click {
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 4px;
    transition: background 0.15s, color 0.15s;
}
.doi-orig-click:hover {
    background: var(--gold);
    color: #fff;
}
/* Base row (profile without exercise) */
.dor-base td:first-child { font-size: 0.72rem; color: var(--gray-400); font-weight: 400; }
.doi-base-val { text-align: center; font-size: 0.69rem; color: var(--gray-400); }
/* Exercise row */
.dor-exercise td:first-child { font-size: 0.72rem; color: #16a34a; font-weight: 600; }
.doi-exercise-val { text-align: center; font-size: 0.72rem; color: #16a34a; font-weight: 600; }
.doi-exercise-label { white-space: nowrap; }
/* Day row */
.dor-day td:first-child { color: var(--gold); }
/* Σ% row */
.dor-sum td:first-child { color: var(--gray-400); font-size: 0.67rem; }
.doi-sum {
    display: block;
    text-align: center;
    font-size: 0.69rem;
    color: var(--gray-500);
    font-weight: 600;
}
.doi-sum.doi-sum-over {
    color: #e05252;
}
/* Slot rows */
.dor-slot td:first-child { color: var(--charcoal); }
.doi-slot-label {
    font-size: 0.69rem;
}
/* Input for day absolute values */
.doi {
    width: 52px;
    padding: 2px 3px;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 5px;
    font-size: 0.72rem;
    text-align: right;
    background: var(--white);
    color: var(--charcoal);
    display: block;
    margin: 0 auto;
}
.doi:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.15);
}
/* Bar + % input + abs value cell */
.doi-bar-cell {
    display: flex;
    align-items: center;
    gap: 3px;
}
.doi-bar-wrap {
    flex: 1;
    min-width: 28px;
    height: 6px;
    background: rgba(201,168,76,0.12);
    border-radius: 3px;
    overflow: hidden;
}
.doi-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 3px;
    transition: width 0.2s;
}
.doi-bar-fill.doi-bar-p { background: #E05252; }
.doi-bar-fill.doi-bar-c { background: #4A90D9; }
.doi-bar-fill.doi-bar-f { background: #E07320; }
.doi.doi-pct {
    width: 32px;
    flex-shrink: 0;
    font-size: 0.67rem;
    padding: 1px 2px;
}
.doi-abs {
    min-width: 24px;
    text-align: left;
    color: var(--gray-400);
    font-size: 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- Recipe replan button -------------------------------------------- */
.recipe-replan-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}
.recipe-replan-btn:hover {
    opacity: 1;
    background: rgba(201,168,76,0.18);
}

/* ── Objetivos Modal ───────────────────────────────────── */
.obj-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.obj-modal {
    background: #fff; border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    animation: objModalIn 0.2s ease-out;
}
@keyframes objModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.obj-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;

/* ═══ Email Plan Modal ═══ */
}
.email-plan-options {
    display: flex; gap: 8px; margin-top: 6px;
}
.email-plan-opt {
    flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); font-size: 0.9rem;
    cursor: pointer; text-align: center; transition: all 0.2s;
}
.email-plan-opt.active {
    border-color: var(--gold); background: rgba(201,168,76,0.1); color: var(--gold); font-weight: 600;
}
.email-plan-hint {
    font-size: 0.78rem; color: var(--gray-400); margin: 8px 0 12px; text-align: center;
}
    border-bottom: 1px solid var(--gray-200);
}
.obj-modal-header h3 {
    margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--gold);
}
.obj-modal-close {
    background: none; border: none; font-size: 1.2rem;
    cursor: pointer; color: var(--gray-400); padding: 4px 8px;
    border-radius: 6px;
}
.obj-modal-close:hover { background: var(--gray-100); color: var(--gray-600); }
.obj-modal-body {
    padding: 16px 20px;
}
.obj-modal-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.88rem;
}
.obj-modal-table th {
    font-size: 0.75rem; color: var(--gray-400); font-weight: 600;
    text-align: center; padding: 4px 6px 8px;
}
.obj-modal-table td {
    padding: 6px 6px; text-align: center; vertical-align: middle;
}
.obj-modal-table .doi-slot-label {
    text-align: left; font-size: 0.82rem; font-weight: 500; color: var(--gray-600);
    white-space: nowrap;
}
.obj-modal-table .doi-orig-label {
    text-align: left; font-style: italic; color: var(--gray-400); font-size: 0.78rem;
}
.obj-modal-table .dor-day td:first-child {
    text-align: left; font-weight: 600; color: var(--gold);
}
.obj-modal-table .dor-sum td:first-child {
    text-align: left; color: var(--gray-400); font-size: 0.72rem;
}
.doi-modal {
    width: 68px; text-align: center; font-size: 0.92rem;
    font-weight: 600; padding: 5px 4px;
    border: 1.5px solid var(--gray-200); border-radius: 6px;
    outline: none;
}
.doi-modal:focus {
    border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}
.obj-modal-table .doi-pct {
    width: 42px; font-size: 0.82rem;
}
.obj-modal-table .doi-abs {
    display: inline-block; min-width: 28px;
    font-size: 0.76rem; color: var(--gray-400);
    margin-left: 3px;
}
.obj-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--gray-200);
}
.obj-modal-reset {
    background: none; border: 1px solid var(--gray-300);
    padding: 7px 14px; border-radius: 8px;
    font-size: 0.82rem; color: var(--gray-500);
    cursor: pointer;
}
.obj-modal-reset:hover { background: var(--gray-100); }
.obj-modal-save {
    background: var(--gold); color: #fff; border: none;
    padding: 8px 24px; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600;
    cursor: pointer;
}
.obj-modal-save:hover { background: #b8942e; }
.obj-modal-save:disabled { background: var(--gray-300); cursor: not-allowed; opacity: 0.6; }
.obj-modal-warn {
    flex: 1; text-align: center;
    color: #d9534f; font-size: 0.78rem; font-weight: 500;
    padding: 0 8px;
}
.obj-modal-footer { display: flex; align-items: center; }
.doi-sum-under { color: #d9534f !important; font-weight: 600; }