/* ==========================================================
   CONTROLL · estado de la sincronización
   - Indicador de la cabecera de Controll (un punto de color y, si hay
     cambios sin subir, cuántos son).
   - Línea de estado de la sección "Cuenta" de los Ajustes.
   ========================================================== */

.sync-indicador {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta);
}

.sync-indicador::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--punto, #b4b4b8);
}

.sync-indicador--al-dia {
    --punto: #4f9a4b;
}

.sync-indicador--pendiente {
    --punto: #e0a030;
}

.sync-indicador--sin-sesion {
    --punto: #b4b4b8;
}

.cuenta__sync {
    margin: 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--baldosa);
    font-size: 15px;
    line-height: 1.4;
    color: var(--apagado);
}

.cuenta__sync--ok {
    color: #3f7a3c;
}

.cuenta__sync--pendiente {
    color: #8a5a00;
    background: #fdf3df;
}

.cuenta__sync--aviso {
    color: #8a2a20;
    background: #fdeceb;
}