/* En settings.css, reemplaza el bloque html.light-mode anterior */

html.light-mode {
    /* Base */
    --base-clr:              #c8e6d6;
    --sidebar-clr:           #f0faf5;
    --main-bg:               #e8f5ee;
    --line-clr:              rgba(20, 100, 60, 0.14);
    --hover-clr:             rgba(0, 0, 0, 0.05);

    /* Texto */
    --text-clr:              #0a2e1c;
    --accent-clr:            #1e6640;
    --secondary-text-clr:    #3a7a57;

    /* Cards */
    --card-bg:               rgba(255, 255, 255, 0.65);
    --card-bg-hover:         rgba(255, 255, 255, 0.9);
    --card-border:           rgba(20, 100, 60, 0.15);
    --card-border-hover:     rgba(20, 100, 60, 0.32);

    /* Verdes */
    --green-bright:          #0f7a4f;
    --green-mid:             #0d6040;
    --green-dim:             rgba(15, 122, 79, 0.1);
    --active-bg:             rgba(15, 122, 79, 0.1);
    --active-bar:            #0f7a4f;
}

/* Sidebar en light necesita texto oscuro */
html.light-mode #sidebar {
    background-color: var(--sidebar-clr);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%);
    border-right-color: var(--line-clr);
    box-shadow: 4px 0 28px rgba(0,0,0,0.08);
}

html.light-mode #sidebar .nav-btn,
html.light-mode #sidebar .dropdown-btn {
    color: rgba(10, 46, 28, 0.55);
}

html.light-mode #sidebar .nav-btn:hover,
html.light-mode #sidebar .dropdown-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: #0a2e1c;
}

html.light-mode #sidebar ul li.active .nav-btn {
    background: var(--active-bg);
    color: var(--green-bright);
}

html.light-mode #sidebar ul li.active .nav-btn i {
    color: var(--green-bright);
}

html.light-mode #sidebar i { color: inherit; }

/* Body en light */
html.light-mode body {
    background-color: var(--main-bg);
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
}

/* Modal cards en light */
html.light-mode .modal-card,
html.light-mode .criteria-modal-card {
    background: #f0faf5;
    border-color: rgba(20, 100, 60, 0.2);
}

html.light-mode .modal-header h2,
html.light-mode .field-group label,
html.light-mode .settings-row-title {
    color: #0a2e1c;
}

html.light-mode .field-group input[type="text"],
html.light-mode .field-group input[type="number"],
html.light-mode .criteria-score-input,
html.light-mode #task-description,
html.light-mode .tasks-select,
html.light-mode .tasks-date-input,
html.light-mode .schedule-modal-select {
    background: rgba(255,255,255,0.7);
    border-color: rgba(20, 100, 60, 0.2);
    color: #0a2e1c;
}

html.light-mode .field-group input::placeholder,
html.light-mode #task-description::placeholder {
    color: rgba(10, 46, 28, 0.35);
}

/* Subject cards en light — color-mix sigue funcionando */
html.light-mode .subject-card {
    background: color-mix(in srgb, var(--subject-clr) 10%, white);
    border-color: color-mix(in srgb, var(--subject-clr) 25%, transparent);
}

/* Category cards */
html.light-mode .category-card,
html.light-mode .settings-card,
html.light-mode .tasks-form-card,
html.light-mode .task-card {
    background: rgba(255,255,255,0.7);
    border-color: rgba(20, 100, 60, 0.14);
}

html.light-mode .task-card-title,
html.light-mode .criteria-item-name,
html.light-mode .category-header h3 {
    color: #0a2e1c;
}

html.light-mode .task-meta-item,
html.light-mode .task-card-desc,
html.light-mode .criteria-item-weight,
html.light-mode .settings-row-desc {
    color: #3a7a57;
}

/* Topbar mobile */
html.light-mode #mobile-topbar {
    background-color: rgba(240, 250, 245, 0.92);
    border-bottom-color: var(--line-clr);
}

/* Schedule */
html.light-mode .cell:not(.header):not(.filled) {
    background: rgba(255,255,255,0.5);
    border-color: rgba(20,100,60,0.15);
    color: rgba(20,100,60,0.3);
}

html.light-mode .cell.header {
    background: rgba(255,255,255,0.5);
    border-color: rgba(20,100,60,0.12);
    color: #3a7a57;
}

html.light-mode .time-input {
    background: rgba(255,255,255,0.6);
    border-color: rgba(20,100,60,0.15);
    color: #1e6640;
}

/* Criteria weight bar bg */
html.light-mode .criteria-weight-track,
html.light-mode .xp-bar {
    background: rgba(0,0,0,0.07);
}