/* ==========================================================
   CRM - TAREAS DIARIAS
   Va despues de agenda.css: reusa la misma barra de calendario
   (.cal-barra, .cal-titulo, .cal-hoy) pero la grilla es propia,
   por mes y sin horas — acá no importa cuándo, importa si.
   ========================================================== */

.tareas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4);
    margin-bottom: var(--e-4);
}

@media (max-width: 860px) {
    .tareas-grid { grid-template-columns: 1fr; }
}

.tareas-panel-nueva,
.tareas-panel-hoy {
    padding: var(--e-4);
}

.tareas-panel-nueva h3,
.tareas-panel-hoy h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: var(--e-3);
}

.tareas-panel-nueva h3 i,
.tareas-panel-hoy h3 i { color: var(--primary); }

#tarea-form select#tarea-asignar { margin-bottom: 0; }

/* ---- Lista de tareas de hoy ------------------------------- */

.tarea-fila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    margin-bottom: 8px;
    transition: border-color 160ms ease, background 160ms ease;
}

.tarea-fila:last-child { margin-bottom: 0; }

.tarea-fila.cumplida {
    border-color: rgba(var(--acento-rgb), 0.45);
    background: rgba(var(--acento-rgb), 0.08);
}

.tarea-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all 160ms ease;
}

.tarea-check:hover { border-color: var(--primary); color: var(--primary); }

.tarea-fila.cumplida .tarea-check {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--bg-main);
}

.tarea-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tarea-txt strong { font-size: 13.5px; color: var(--text-main); }
.tarea-txt small { font-size: 12px; color: var(--text-muted); }

/* ---- Calendario mensual de tareas -------------------------- */

.tareas-panel-calendario { padding: var(--e-4); }

.tareas-cal-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.tareas-cal-dias span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.tareas-cal-grilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.tareas-cal-celda {
    min-height: 64px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tareas-cal-celda.fuera-de-mes { opacity: 0.35; }

.tareas-cal-celda.hoy {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(var(--acento-rgb), 0.35);
}

.tareas-cal-num { font-size: 12px; color: var(--text-muted); font-weight: 600; }

.tareas-cal-tilde {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: var(--bg-main);
    background: var(--primary);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

/* Las que quedaron sin marcar en un dia ya cerrado. Mismo cuerpo que
   el tilde para que las dos marcas de un mismo dia se lean como un
   par, pero en hueco y no en solido: el dia cumplido es el que tiene
   que saltar a la vista primero. El rojo va apagado a proposito —es
   el registro de un dia que paso, no una alarma que pida hacer algo,
   porque ya no se puede hacer nada al respecto. */
.tareas-cal-falta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.12);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

/* Lo que falta HOY: el dia sigue abierto, todavia se puede cumplir.
   Sin fondo ni color de estado —no es un logro ni un fracaso— para
   que no compita con las dos marcas de arriba, que si son resultados. */
.tareas-cal-pend {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.tareas-cal-vacio {
    font-size: 12px;
    color: var(--text-dim);
}

@media (max-width: 640px) {
    .tareas-cal-celda { min-height: 44px; }
}