/* Componente lista-tareas (shell, #53): el panel «Comienza» del ERP. Solo tokens.
 * Cabecera verde suave; una tarea por fila (44px como mínimo), con su casilla
 * redonda. Marcada: el círculo se llena de verde y la marca se dibuja
 * (transiciones de 0,3 s, sin desplazamientos; con movimiento reducido, al
 * momento). La casilla de verdad cubre toda la fila (opacidad 0): es el
 * objetivo y recibe el foco. */

.pf-tareas {
    overflow: hidden;
    color: var(--pf-color-text);
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-md);
}

.pf-tareas__cabecera {
    padding: var(--pf-space-sm) var(--pf-space-md);
    background-color: var(--pf-color-brand-soft);
    background-image: linear-gradient(90deg, var(--pf-verde-3), var(--pf-verde-2));
    border-bottom: var(--pf-rule);
}

.pf-tareas__titulo {
    margin: 0;
    font-size: var(--pf-text-lg);
    font-weight: var(--pf-weight-black);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-heading);
}

.pf-tareas__subtitulo {
    margin: var(--pf-space-3xs) 0 0;
    font-size: var(--pf-text-sm);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-muted);
}

.pf-tareas__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-tareas__tarea + .pf-tareas__tarea .pf-tareas__opcion::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: calc(var(--pf-space-md) + 1.5rem + var(--pf-space-xs));
    border-top: var(--pf-rule);
}

.pf-tareas__opcion {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pf-space-xs);
    min-height: 2.75rem;
    padding: var(--pf-space-2xs) var(--pf-space-md);
    font-weight: var(--pf-weight-bold);
    line-height: var(--pf-leading-snug);
}

label.pf-tareas__opcion {
    cursor: pointer;
    transition: background-color var(--pf-transition);
}

label.pf-tareas__opcion:hover {
    background-color: var(--pf-color-bg-alt);
}

.pf-tareas__casilla {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Casilla redonda: borde de control (≥ 3:1); marcada, relleno verde (≥ 3:1)
 * con la marca en on-accent (≥ 4,5:1). */
.pf-tareas__marca {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--pf-color-surface);
    border: 1.5px solid var(--pf-color-border-control);
    border-radius: var(--pf-radius-round);
    transition: background-color var(--pf-transition), border-color var(--pf-transition);
}

.pf-tareas__marca svg {
    width: 1.125rem;
    height: 1.125rem;
}

.pf-tareas__check {
    fill: none;
    stroke: var(--pf-color-on-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

.pf-tareas__casilla:checked + .pf-tareas__marca,
.pf-tareas__tarea--hecha > span.pf-tareas__opcion > .pf-tareas__marca {
    background-color: var(--pf-color-accent);
    border-color: var(--pf-color-accent);
}

.pf-tareas__casilla:checked + .pf-tareas__marca .pf-tareas__check,
.pf-tareas__tarea--hecha > span.pf-tareas__opcion .pf-tareas__check {
    stroke-dashoffset: 0;
}

.pf-tareas__casilla:checked ~ .pf-tareas__texto,
.pf-tareas__tarea--hecha > span.pf-tareas__opcion .pf-tareas__texto {
    color: var(--pf-color-text-soft);
}

/* Esperando a marcarse al asomar (script.js): se ve sin marcar. */
.pf-tareas__tarea--espera .pf-tareas__marca,
.pf-tareas__tarea--espera .pf-tareas__casilla:checked + .pf-tareas__marca {
    background-color: var(--pf-color-surface);
    border-color: var(--pf-color-border-control);
}

.pf-tareas__tarea--espera .pf-tareas__check,
.pf-tareas__tarea--espera .pf-tareas__casilla:checked + .pf-tareas__marca .pf-tareas__check {
    stroke-dashoffset: 16;
}

/* Foco: el anillo común, alrededor de la casilla redonda. */
.pf-tareas__opcion:has(.pf-tareas__casilla:focus-visible) .pf-tareas__marca {
    outline: 2px solid var(--pf-color-focus);
    outline-offset: 2px;
}

@supports not selector(:has(*)) {
    .pf-tareas__opcion:focus-within .pf-tareas__marca {
        outline: 2px solid var(--pf-color-focus);
        outline-offset: 2px;
    }
}

.pf-tareas__progreso {
    margin: 0;
    padding: var(--pf-space-xs) var(--pf-space-md);
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
    border-top: var(--pf-rule);
}