:root {
    --ct-briyam: #1f6feb;
    --ct-briyam-soft: #e8f0fe;
    --ct-personal: #16875a;
    --ct-personal-soft: #e6f4ee;
    --ct-neutral: #6c757d;
    --ct-neutral-soft: #f1f3f5;
    --ct-ink: #1c2333;
}

body {
    background: #f5f6f8;
    color: var(--ct-ink);
}

.ct-navbar {
    background: var(--ct-ink);
}

.ct-navbar .nav-link.active {
    font-weight: 600;
    border-bottom: 2px solid #ffc107;
}

/* ---------- Separacion visual de areas ---------- */

.area-briyam   { --area: var(--ct-briyam);   --area-soft: var(--ct-briyam-soft); }
.area-personal { --area: var(--ct-personal); --area-soft: var(--ct-personal-soft); }
.area-neutral  { --area: var(--ct-neutral);  --area-soft: var(--ct-neutral-soft); }

.ct-area-card {
    border: 1px solid #e3e6ea;
    border-top: 4px solid var(--area, var(--ct-neutral));
    border-radius: .6rem;
    background: #fff;
}

.ct-area-title {
    color: var(--area, var(--ct-neutral));
}

.ct-area-chip {
    display: inline-block;
    background: var(--area-soft, var(--ct-neutral-soft));
    color: var(--area, var(--ct-neutral));
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Barra lateral de color en cada tarea, segun su area */
.ct-task {
    border-left: 4px solid var(--area, var(--ct-neutral));
    background: #fff;
}

.ct-task.ct-overdue { background: #fff6f6; }

.ct-count {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.ct-count-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
}

/* ---------- Progreso ---------- */

.ct-progress {
    height: .55rem;
    border-radius: 999px;
    background: #e9ecef;
}

.ct-progress .progress-bar {
    background: var(--area, var(--ct-neutral));
}

.ct-progress-text {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: #6b7280;
}

/* ---------- Detalles ---------- */

.ct-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.ct-task-title { font-weight: 600; }

.ct-task-done .ct-task-title {
    text-decoration: line-through;
    color: #9aa1ab;
}

.ct-meta {
    font-size: .82rem;
    color: #6b7280;
}

.ct-empty {
    color: #8a929c;
    font-size: .9rem;
    padding: .75rem 0;
}

.ct-login-card {
    max-width: 26rem;
    margin: 8vh auto 0;
}

@media (max-width: 575.98px) {
    .ct-count { font-size: 1.3rem; }
}